default user agent stylesheet not overriding - css

Question

I am creating a custom menu (but also using bootstrap as a front-end engine) and cannot override default user agent stylesheet (currently testing on chrome).
Let's say I have a div for the menu and I want to insert menu items (equal width for all). The problem is that there is a default padding/margin and I am not being able to place them in the same row.
In my example, I have a div and four menu items (each should be 25% as in the CSS).
Here is JSFIDDLE: JSFIDDLE
Here is my code:
HTML:
<!-- LOAD CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- LOAD JQUERY -->
<script src="js/jquery-3.2.1.min.js"></script>
----------------------------------------------------
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
----------------------------------------------------
<!-- LOAD JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
CSS:
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}

Answer 1

You are facing white spaces issue and not padding/margin as you think. You can add display:flex to the container to fix the issue
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Or the font-size:0 trick (for old browsers)
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
font-size:0;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Related links for more solution and explanation :
Display: Inline block - What is that space?
How to remove the space between inline-block elements?
Ignore whitespace in HTML

Answer 2

Your problem is whitespaces between the inline-block elements. These are known to break the expected alignment. So, in order to solve it, you can do some HTML changes, or applying font-size: 0; to the parent (and restore it with a value for the children, if needed).Your can check CSS-tricks: Fighting the space between inline block elements for more info.
The simpler solution, though, is to use display: flex on the ul. If the parent is a flexbox, its children will be aligned in a row (or a column, if you set it to), without any spaces but custom-added margins.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>

Answer 3

Set float: left;
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}