Magento navigation for centering nav items equidistant/equally across 100% width
! important ! carriage returns make a differnce and need to be used after each "li"
// navigation
#header-nav {
border: none;
height: 49px;
line-height: 49px;
.nav-primary {
margin: 0 $trim;
text-align: justify;
font-size: 0.1px;
height: 49px;
line-height: 49px;
&:after {
content: '';
width: 100%;
display: inline-block;
}
li.level0 {
display: inline-block;
line-height: 49px;
a.level0 {
padding: 0;
line-height: 49px;
}
}
}
} // end navigation
#container {
height: 125px;
text-align: justify;
border: 10px solid black;
font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
min-width: 600px;
}
#container div {
width: 150px;
height: 125px;
display: inline-block;
background: red;
}
#container:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}