Центрируйте div под заголовком

Question

Я добавил область виджета под своим заголовком, и я стараюсь сосредоточить ее под логотипом.

Я попытался добавить display: block и margin:0 auto или text-align: center на #header-sidebar, но он не работает. Кроме того, я попытался изменить структуру HTML-кода, а не только сделать CSS-настройки, но все же, стек #header-sidebar слева и не центрирован.

Вот мой код:

HTML код:

<header id="header"> 

    <div class="header-container"> 

     <a href="javascript:;" class="show-on-phone show-on-tablet" id="phone-toggle-menu"></a> 

     <a href="#" class="logo"><img style="vertical-align: middle;" src="#"></a> 

     <nav> //here is the navigation, hidden in mobile view </nav> 

     <div id="header-sidebar" class="header-widget-area"> 
      <div class="textwidget"> 
       //some widget here 
      </div> 

      <div class="mlp_language_box"> 
       // some other widget here 
      </div> 
     </div> 
    </div> 

</header> 

CSS код:

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
} 

header#header .logo { 
    width: 100%; 
    float: none; 
    box-sizing: border-box; 
    text-align: center; 
    position: absolute; 
} 

Answer 1

display:table и margin:auto как для логотипа и виджетов области будет делать трюк ... Так одна кнопка переключения может оставаться абсолютной.

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
} 

header#header .logo { 
    box-sizing: border-box; 
    display: table; 
    margin: auto; 
} 

header #header-sidebar{ 
    display: table; 
    margin: auto; 
} 

Answer 2

Заменить код CSS со следующими:

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: center; 
} 

header#header .logo {   
    box-sizing: border-box; 
    text-align: center; 
    position: absolute; 
}