Currently in the process of redoing my personal website from scratch, starting with a fixed bottom navbar. Strange issue arises when trying to style it using an external stylesheet versus an internal one. Specifically, the problem lies with this rule:
.nav li {
margin: -5px;
}When applied internally, it functions as expected by eliminating unwanted whitespace between list items on my stacked bottom navbar. However, when placed in the external sheet, the whitespace remains and strange behavior occurs when commenting out parts of the rule. Any insight would be greatly appreciated. Thanks!
UPDATE: The odd thing is that besides linking bootstrap and jquery, there isn't much HTML or CSS present. Just a simple navbar.
Here's the snippet of HTML within the body:
<div class="container-fluid"> <nav class="navbar navbar-fixed-bottom"> <ul class="nav nav-pills nav-stacked"> <li><a class="about" href="about.html"><div class="navTileContent"><i class="glyphicon glyphicon-user" aria-hidden="true"></i><p>about</p></div></a></li> <li><a class="portfolio" href="portfolio.html"><div class="navTileContent"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i><p>portfolio</p></div></a></li> <li><a class="art" href="art.html"><div class="navTileContent"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i><p>art</p></div></a></li> <li><a class="contact" href="contact.html"><div class="navTileContent"><i class="glyphicon glyphicon-envelope" aria- hidden="true"></i><p>contact</p></div></a></li> </ul> </nav> </div>And here's the lone CSS code:
<style>
.nav li {
margin: -5px;
}
.nav li .navTileContent {
color: #e1e8f4;
text-align: center;
padding: 1%;
}
.nav li .navTileContent p {
padding-left: 20px;
display: inline;
}
.about {
background-color: #6ad8d1;
}
.portfolio {
background-color: #12d132;
}
.art {
background-color: #12466b;
}
.contact {
background-color: #0d336d;
}
</style>