I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. Thank you.
https://i.sstatic.net/MjcEr.gif
HTML:
<div class="container-fluid">
<div class="row">
<ul class="list-inline clearfix">
<li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
<a href="index.html" class="hvr-sweep-to-bottom"><i class="fa fa-home" san-serif hidden="true"></i><span>Home</span></a>
</li>
<li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
<a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-ticket" aria hidden="true"></i><span>Tickets</span></a>
</li>
<li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
<a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-commenting" aria hidden="true"></i><span>Video</span></a>
</li>
<li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
<a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-address-book" aria hidden="true"></i><span>Contact</span></a>
</li>
</ul>
</div>
</div>
CSS:
.menuitem{
height: 120px;
text-align: center;
}
.menuitem a{
width: 100%;
text-decoration: none;
color: #ffffff;
height: 120px;
}
.menuitem a i{
padding-top: 22px;
display: block;
color: #fafafa;
font-size: 26px;
}
.ul-menu-color{
background-color: #000;
font-family: 'Creepster', cursive;
}