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!
3
Answers
Try adding:
left:0;
or:
body{ margin:0; padding:0; }
to your CSS file
to
ul
tagpadding: 0;
give and try againTry 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.