My header is styled with a max-width and margin to position it in the center of the page horizontally. Despite this, running a lighthouse report reveals a horizontal shift issue.
If anyone has faced this problem before and knows how to fix the horizontal shifting, I would greatly appreciate your input. Thank you.
Screenshot: https://i.sstatic.net/g2rN6.png
Here is the HTML code:
<header class="header" role="banner" itemscope="" itemtype="http://schema.org/WPHeader">
<div class="header__container">
<div class="header__search">
<form class="header-search">
<input type="text" placeholder="" class="header-search__input" >
<button type="submit" class="header-search__button" name="Search" aria-label="Search">
<i class="fa fas--search"></i>
</button>
</form>
</div>
</div>
</header>
And here is the CSS code snippet:
.header {
width: 100%;
background: #321428;
}
.header__container {
padding: 10px;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr;
grid-template-columns: auto 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
grid-gap: 10px;
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
@media (min-width: 768px) {
.header__container {
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
-ms-grid-rows: auto 40px;
grid-template-rows: auto 40px;
grid-gap: 20px;
}
}
@media (min-width: 960px) {
.header__container {
-ms-grid-columns: 21.6% 1fr 25.7%;
grid-template-columns: 21.6% 1fr 25.7%;
padding: 10px 20px 15px;
height: 115px;
}
}