Nav Menu items hover padding ignore margins - html

Question

Interesting title I know, didn't know how else to word it. I'm trying to have my navigation bar items evenly spaced regardless of font type which will change the size slightly. I've included a :hover feature with will darken the background behind the items. This works well, however when I add margins or padding to the left and right of nav ul to indent the sides, the darkened area is omitted from the margin/padding space.
The first is how it looks with no 'nav ul' padding. The second is with it where the area is cut off and the third is how I'd like it to look (with the 'home' text more centered, this was a rough mspaint edit lol.
On top of this, is there a way to make the padding for the 'header nav ul li a {' align perfectly so there's no space inbetween? I have a few px's space between where the hover occurs to allow for change in font-type without ruining the even spacing.
Totally a beginner at both CSS and HTML so if you're going to help me please only offer your kindest beginner-friendly advice.
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)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
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>Home</li>
<li>Website Design</li>
<li>Art & Poetry</li>
<li>Blog & Other</li>
<li>Music & More</li>
<li>Shop</li>
</ul>
</nav>
</div> <!-- end of container-->
</div> <!-- end of navigator menu bar-->
</header>
JSFiddle (again lol): https://jsfiddle.net/c1y9axqt/

Answer 1

guess you wanted this i changed only the css thats all
.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)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
height: 26px;
}
header nav ul li:hover {
color: #E1E0E0;
background: rgba(0,0,0,0.2);
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
nav ul li{
display: inline;
width:160px;
text-align:center;
}
header nav ul li a {
display: inline;
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);
}
hope it helps

Answer 2

I've changed the way you had it styled slightly to keep things in blocks. I think you'd over complicated it for yourself in places.
As you can see i've set a width on the list items in the nav using % to keep them all evenly sized, and given them text-align: center;. Then by setting the background color of the anchor tags, it makes changing the color for the hover effect much easier.
You should look into Media Queries to make the nav become responsive for smaller screens.
Hope this all help,
Happy Coding!
Fiddle here
HTML:
<div id="navContainer">
<nav>
<ul>
<li>Home</li>
<li>Website Design</li>
<li>Art & Poetry</li>
<li>Blog & Other</li>
<li>Music & More</li>
<li>Shop</li>
</ul>
</nav>
</div>
CSS:
body {
margin: 0px 0px;
}
#navContainer {
width: 100%;
}
#navContainer nav {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#navContainer ul {
list-style: none;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#navContainer li {
float: left;
width: 16.666667%;
text-align: center;
}
#navContainer a {
text-decoration: none;
display: block;
background-color: #005073;
line-height: 26px;
}
#navContainer a {
text-decoration: none;
display: block;
background-color: #005073;
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);
font-weight: bold;
letter-spacing: 1px;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
}
#navContainer a:hover {
color: #E1E0E0;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* Standard syntax */
}