Question 296539 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I make my navigation ul li background fill the entire navbar?

I’m creating a simple website for my intro to web design class. I’m trying to make a centered navbar with six list items. As the user hovers over an item, the background changes from teal to white. My issue is that this white background doesn’t extend all the way to the left.

I’ve tried experimenting with different paddings and margins, but each time the white overflows on the right but doesn’t go to the left. Changing the display of the a to block doesn’t help either.

nav ul li a {
  text-decoration: none;
}

nav {
  line-height: 2;
  font-family: Garamond, Georgia, 'Times New Roman', Times, serif;
  width: 100%;
  background-color: #023436;
}

nav ul li {
  list-style-type: none;
  padding: 0;
  text-align: center;
  width: 100%;
}

nav ul li:hover {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

a#navigation {
  display: none;
}
<header>
  <img src="media/header2.png" alt="Reading Record Header" id="headerlogo">
  <nav class="horizontal" id="navbar">
    <a href="#" id="navigation"><img src="media/naviconnobg.png"></a>
    <ul>
      <li><a href="finalprojecthome.html" style="color:#ecb9a7;">Home</a></li>
      <li><a href="finalprojectlog.html" style="color:#ecb9a7;">Log</a></li>
      <li><a href="finalprojectcontact.html" style="color:#ecb9a7;">Contact</a></li>
      <li><a href="finalprojectwriting.html" style="color:#ecb9a7;">Original Work</a></li>
      <li><a href="finalprojectreviews.html" style="color:#ecb9a7;">Reviews</a></li>
      <li><a href="finalprojectphotoshoots.html" style="color:#ecb9a7;">Photoshoots</a></li>
    </ul>
  </nav>
</header>

Sorry if I did this wrong, it’s my first time posting here. Thanks in advance for any help!

Tags:

3

Answers


  1. 0

    Try adding:
    left:0;
    or:
    body{ margin:0; padding:0; }
    to your CSS file

    Login or Signup to reply.
  2. 0

    to ul tag padding: 0; give and try again

    Login or Signup to reply.
  3. 0

    Try to use css reset in your project to reset the browser’s default values.

    in your code, ul has padding on the left side. using padding-left:0; Your problem will be solved.

    In this situation, using the browser’s inspect element (DevTools) can help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search