My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrapper's borders if I put it in the header itself. So, I decided to place it in the body instead, but now I'm facing a horizontal scrollbar at the bottom and the center of the page has shifted to the right. How can I eliminate the scrollbar and center the page correctly? Below is the code:
body {
background-color: #f6f6f6;
background-image: url('../img/menu-background.png');
width: 1920px;
background-repeat: no-repeat;
font-family: 'PT Sans';
}
.wrapper {
width: 950px;
min-height: 1658px;
border: 1px solid grey;
margin: 0 auto;
}
header a {
text-decoration: none;
text-align: center;
display: block;
width: 365px;
margin-left: auto;
margin-right: auto;
}
Here is the HTML:
<body>
<div class="wrapper">
<header>
<a href="#">
<h1>Lorem ipsum</h1>
<span>bla-bla-bla</span>
</a>
</header>