I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the left margin. Below is the HTML code:
body {
background: #bf5c71 url('body-bg.jpg');
}
.clearfix:after {
display: inline-block;
clear: both;
align-content: center;
}
/*----- Menu Outline -----*/
.menu-wrap {
box-shadow: inset 0px 0 0 rgba(255, 255, 255, 0.00);
-webkit-box-shadow: inset 0px 0 0 rgba(255, 255, 255, 0.00);
display: inline-block;
margin: 0px auto;
}
.menu {
display: inline-block;
margin: auto;
}
.menu li {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
list-style: none;
font-family: 'Century Gothic';
}
.menu a {
transition: all linear 0.15s;
color: #FF283B;
}
.menu li:hover > a,
.menu .current-item > a {
color: #F5F5F5;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
display: inline-block;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: F5F5F5;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
padding: 3px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
background: 0;
}
.sub-menu li {
display: inline-block;
font-size: 16px;
}
.sub-menu li a {
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 5px;
display: inline-block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #FF283B;
}
img {
border: thin solid #FF283B;
margin-left: 5%;
}
h3 {
margin-top: 3%;
font-size: 24px;
}
.wrapper {
display: inline-block;
margin: 0px auto;
}<div class="wrapper">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
<div align="center"><a href="index.html">Home</a></a>
</div>
</li>
<li>
<div align="center"><a href="#">Projects <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="iap.html">Image Adaptation</a>
</li>
<li><a href="sonic.html">Sonic Memory</a>
</li>
<li><a href="documentary.html">Documentary Video</a>
</li>
</ul>
</div>
</li>
<li>
<div align="center"><a href="resume.html">Resume</a>
</div>
</li>
<li>
<div align="center"><a href="about.html">About</a>
</div>
</li>
<li>
<div align="center"><a href="contact.html">Contact</a>
</div>
</li>
</ul>
</nav>
</div>
</div>The only workaround I've found so far is shifting the bar to the left using margin-left.
Website: tylerbr.com