I have recently added a widget area below the header on my website, and I am facing an issue with centering it just under the logo.
I've attempted to use display: block and margin:0 auto, as well as text-align: center on the #header-sidebar in the CSS, but unfortunately, these approaches haven't worked. I also tried adjusting the HTML code structure instead of solely relying on CSS tweaks, but the #header-sidebar still remains stacked on the left side instead of being centered.
Below is the snippet of my code:
HTML code:
<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 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;
}