Coming up with an interesting title is always a challenge, but here goes. I want my navigation bar items to be evenly spaced regardless of the font type, which might vary in size slightly. I've added a :hover feature that darkens the background behind the items. It works well, but when I try to add margins or padding to the left and right of nav ul for indentation, the darkened area doesn't cover the margin/padding space.
https://i.sstatic.net/UmjSY.png
The first image shows how it looks with no 'nav ul' padding. The second one is with padding where the area gets cutoff, and in the third image, I attempted to center the 'home' text more (not very elegantly though, just a rough mspaint edit).
Additionally, is there a way to make the padding for 'header nav ul li a {' align perfectly so there's no extra space in between? I have added a few px of space between where the hover effect occurs to account for changes in font type without disrupting the even spacing.
I'm a total beginner at CSS and HTML, so please provide your most gentle and beginner-friendly advice if you're willing to help me out.
JSFiddle: https://jsfiddle.net/c1y9axqt/
Relevant code:
CSS
.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}
.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3));
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3));
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3));
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3));
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4)
border-style: solid;
border-width: 1px;
border-color: black;
height: 26px;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
nav ul li{
display: inline;
}
header nav ul li a {
display: inline;
padding: 6px 30px 6px 30px;
letter-spacing: 1px;
text-decoration: none;
font-weight: bold;
line-height: 26px;
color: #EBEAEA;
text-shadow:
-1px -1px 1px rgba(0, 0, 0, .6),
1px -1px 1px rgba(0, 0, 0, .6),
-1px 1px 1px rgba(0, 0, 0, .6),
1px 1px 1px rgba(0, 0, 0, .6);
}
header nav ul li a:hover {
color: #E1E0E0;
background: rgba(0,0,0,0.2);
}
header nav ul li a:active {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;
color: #CECCCC;
background: rgba(0,0,0,0.3);
}
HTML
<header>
<div class="container clearfix">
<div class="nav_menu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Website Design</a></li>
<li><a href="#">Art & Poetry</a></li>
<li><a href="#">Blog & Other</a></li>
<li><a href="#">Music & More</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
</div> <!-- end of container-->
</div> <!-- end of navigator menu bar-->
</header>
JSFiddle (again lol): https://jsfiddle.net/c1y9axqt/