html - Last <li> Not Inline, Messes up the Size of it -

so webpage making dropdown menu scratch. have header contains 5 list items , logo. let's call list items tab1, tab2, tab3, tab4 , tab5. goal have tab1, tab2, tab3, tab4 , logo display inline, have tab5 display right below tab4. this, set first 4 tabs , logo have have property display: inline-block , 5th tab display: block. solves issue of having fifth tab display under other tabs , logo, though fifth tab not retain same width other tabs, though classified under same class .tab. ends happening fifth tab becomes width of body. tried fix setting left , right padding of tab manually, though not work. there way can have fifth tab act/display other tabs (as in same width, height, etc.), not displayed inline?

here's html:

<div class="header">     <a class="tab" id="tab1"><li>home</li></a>     <a class="tab" id="tab2"><li>about</li></a>     <img src="images/logo.png" id="logo" width="260px" height="95px;"/>     <a class="tab" id="tab3"><li>menu</li></a>     <a class="tab" id="tab4"><li>order</li></a>     <a class="tab" id="tab5"><li>cater</li></a> </div> 

and here's css:

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; } #tab5{     margin-top: 10px;     display: block; } 

here's jsfiddle demonstration: https://jsfiddle.net/gobtt6vk/

thanks!

the #tab5 occupying 100% of body's width because that's display:block; does.

you can solve problem giving width, example:

#tab5 {     display: block;     width: 30px;     margin: 10px auto 0 auto; /* aligns #tab5 center , gives margin-top:10px; */ } 

or can solve giving display:table; instead of display:block; wont need give fixed width, adjust text.
html structure should improved, wasted little bit of time here , reorganized you.

here's online example: https://jsfiddle.net/wujncnsd/

<div class="header">     <ul>         <li id="tab1" class="tab"><a>home</a></li>         <li id="tab2" class="tab"><a>about</a></li>         <li id="logo">             <img src="images/logo.png" width="260" height="95"/>         </li>         <li id="tab3" class="tab"><a>menu</a></li>         <li id="tab4" class="tab"><a>order</a></li>         <li id="tab5" class="tab"><a>cater</a></li>     </ul> </div> 

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; } #tab5{     margin: 10px auto 0 auto;     display: table; }