Содержание строки заголовка не соответствует

Question

Содержание Бар на приведенной выше странице не выравнивается.

Я пытаюсь получить их в 1 строке, но они не совпадают.

Вот ссылка на скрипку: https://jsfiddle.net/xgvqzhmh/

<div class="container"> 
    <div class="header"> 
     <div class="f"> 

      <section class="wrapper"> 

       <section class="material-design-hamburger"> 
       <button class="material-design-hamburger__icon"> 
        <span class="material-design-hamburger__layer"></span> 
       </button> 
       </section> 

       <section class="menu menu--off"> 
       <div>Android's Material Design Hamburger Animation</div> 
       </section> 

      </section>   
     </div> 
     <div class="type"> 
      <div class="daily">Daily</div> 
      <div class="dropdown"></div> 
     </div> 
     <div class="last"><img src="../Images/ic_action_overflow.png" width="35px" ></div> 
    </div> 

Благодаря

Answer 1

Это должно сделать это (https://jsfiddle.net/xgvqzhmh/5/):

.header{ 
    display: table; 
    width: 100%; 
    height: 80px; 
    background-color: #26A69A; 
    -webkit-filter:drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.4)); 
} 
.hamburger{ 
    margin-left: 50px; 
    width: 2%; 
} 
.type{ 
    width: 88%; 
} 
.daily{ 
    border-bottom: 2px solid #90CAF9; 
    width: 80px; 
} 
.last{ 
    width: 3%; 
    cursor: pointer; 
} 
.f, .type, .last { 
    display: table-cell; 
}