How to get rid of horizontal scroling?

Question

I wanted to make a background image being fully visible in all resolutions. It was suggested to me to use this code to achieve it:

body {background:none !important;}
.header-outer { background: #fff url(http://idevsky.com/images/1.jpg) no-repeat
center center;background-size: contain;width: 100vw;height: calc(100vw / 1.5);}

It does show the image the way I want, but there's an unwanted "side-effect" to it for some reason. Now I get a small horizontal scrolling. So my question is how to avoid it? Here's the site's URL:

http://idevsky.com

Answer 1

No need to contain the background image or set the width. Simply set the height of the element to the viewport height and then make the background cover this area:

.header-outer {
    background: #fff url(http://idevsky.com/images/1.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
}