html - Why don't all elements with the same class have the same padding? -

so i'm making webpage , making header includes 4 links/tabs, logo , dropdown menu when hovers on 4th tab display hidden 5th tab. working except can't seem 5th tab (the "cater tab") have the same padding other four, though have same class "tab". instead, gives 0 padding. wondering why , if there way fix it?

here's html:

<div class="header">     <ul>         <li class="tab"><a>home</a></li>         <li class="tab"><a>about</a></li>         <li id="logo">             <img src="images/logo.png" width="260" height="95"/>         </li>         <li class="tab"><a>menu</a></li>         <ul class="dropdown_container">             <li class="tab super_tab"><a>order</a></li>             <div class="dropdown">                 <li class="tab sub_tab"><a>cater</a></li>             </div>         </ul>     </ul> </div> 

here's css:

ul {     margin: 0;     padding: 0; } li {     list-style-type: none; } .header{     text-align: center;     background-color: red; } .tab, #logo{     padding-right: 2.4%;     padding-left: 2.4%;     display: inline-block;     vertical-align: middle;     border: 2px solid black; } .dropdown{     display: table; } .dropdown_container{     display: inline; } .sub_tab{     margin-left: 0; } 

here's jsfiddle demonstration: https://jsfiddle.net/90udrejh/

thanks!

according mdn

padding

applies elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group , table-column. applies ::first-letter.

so change display:table .dropdown value , can't have <div> child of <ul>.

here possible snippet

ul {    margin: 0;    padding: 0;  }  li {    list-style-type: none;  }  .header {    text-align: center;    background-color: red;  }  .tab,  #logo {    padding-right: 2.4%;    padding-left: 2.4%;    display: inline-block;    vertical-align: middle;    border: 2px solid black;  }  .dropdown,  .dropdown_container {    display: inline-block;  }  .sub_tab {    margin-left: 0;  }

<div class="header">    <ul>      <li class="tab"><a>home</a>      </li>      <li class="tab"><a>about</a>      </li>      <li id="logo">        <img src="images/logo.png" width="260" height="95" />      </li>      <li class="tab"><a>menu</a>      </li>      <ul class="dropdown_container">        <li class="tab super_tab"><a>order</a>        </li>        <li class="dropdown">          <span class="tab sub_tab"><a>cater</a></span>        </li>      </ul>    </ul>  </div>