Center a div below the header - html

Question

I added a widget area below my header and I try to center it just under the logo.
I tried to add display: block and margin:0 auto or text-align: center on #header-sidebar, but it doesn't work. Also, I tried to change the structure of the HTML code and not only make CSS tweaks, but still, the #header-sidebar stack on the left and not centered.
Here is my code:
HTML code:
<header id="header">
<div class="header-container">
<img style="vertical-align: middle;" src="#">
<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 code:
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 and margin:auto for both logo and widget area will do the trick... So toggle button alone can stay absolute.
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

Replace your css code with following :
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;
}