default user agent stylesheet not overriding

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;
}

If you're using bootstrap, then make use of class=row and class=col-size-value. Use what the framework has already provided. https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp — , Dec 18 '17 at 09:28
For future reference, remember that *user-agent* styles carry the lowest **weight**, after *user* styles and *author* styles respectively. The precedence order is author style sheets before user style sheets or user-agent stylesheet. So you should always be able to over-qualify a user-agent style. see: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#Cascading_order — UncaughtTypeError, Dec 18 '17 at 09:36

Temani Afif · Accepted Answer · 2017-12-18T09:38:17.813

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

can i use alternative for display: flex for old browsers? – jon daniels Dec 18 '17 at 09:37 — jon daniels, Dec 18 '17 at 09:37
@jondaniels check again i added another solution – Temani Afif Dec 18 '17 at 09:38 — Temani Afif, Dec 18 '17 at 09:38

score 1 · Answer 2 · answered Dec 18 '17 at 09:30

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>

score 0 · Answer 3 · answered Dec 18 '17 at 09:26

0

Set float: left;

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

answered Dec 18 '17 at 09:26

max

366
5
18

display:inline-block is not necessary here and it would be good to add some explanation for the record :) – Temani Afif Dec 18 '17 at 09:36

default user agent stylesheet not overriding

3 Answers3