Attempting to design a menu bar using CSS, where the main buttons (blue divs) need to be centered within the navigation bar (orange divs) with equal spacing between each button.
Despite trying margin: 0 auto, the alignment is not working as expected.
Below is the code snippet:
.nav {
height: 40px;
width: 80%;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
background-color: lightsalmon;
}
.nav__btn-cont {
width: 20%;
}
.nav__btn {
height: 50px;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
margin: 0 auto;
background-color: lightblue;
}
<div class="nav">
<div class="w3-row">
<div class="w3-col nav__btn-cont">
<div class="w3-col nav__btn">
</div>
</div>
<div class="w3-col nav__btn-cont">
<div class="w3-col nav__btn">
</div>
</div>
<div class="w3-col nav__btn-cont">
<div class="w3-col nav__btn">
</div>
</div>
<div class="w3-col nav__btn-cont">
<div class="w3-col nav__btn">
</div>
</div>
<div class="w3-col nav__btn-cont">
<div class="w3-col nav__btn">
</div>
</div>
</div>
</div>
Check out the fiddle for a visual representation: http://jsfiddle.net/zpoqjc5s/
Seeking guidance on how to resolve this issue. Any assistance or suggestions would be greatly valued. Thank you for your help.
Important: Bootstrap and w3.css are being utilized in this project.