While working on my menu design, I've encountered an issue with unexplained margins between the list items that cannot be found in the developer's console. Here is the code snippet: HTML
<div class="navbar">
<ul class="navbar_ul">
<li class="navbar_list_item navbar_main">Point Blank</li>
<li class="navbar_list_item navbar_main">Tanki Online</li>
<li class="navbar_list_item navbar_main">Dota 2</li>
<li class="navbar_list_item navbar_main">Warface</li>
<li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
<li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
</ul>
</div>
And, here is the CSS:
.navbar_list_item {
display: inline-block;
}
.navbar, .navbar ul, .navbar li {
text-align: center;
padding: 0;
}
.navbar_ul {
width: 100%;
}
.navbar_list_item {
color: white;
width: 16.3%;
margin: 0;
height: 40px;
}
.navbar_main {
background-color: #3978C2;
}
.navbar_minor {
background-color: #2E3A86;
}
Check out the screenshot of the menu here: https://i.sstatic.net/c00EN.png Thank you!