background-size: cover larger than screen width

Hello. I am creating my first website. And following this guide:

my index.html:

<!DOCTYPE html>
{% load static %}

<html>
<link rel="stylesheet" href="{%static 'css/main.css' %}">
<head>
	<meta charset="UTF-8">
    <title>My awesome website</title>
</head>

<body>
	<section class="hero">
		<div class="hero-inner">
	        <h1>text text text text</h1>
	        <h2>Look at this website and bask in its amazing glory!</h2>
	        <a href="https://example.com/" class="btn">Book now.</a>
		</div>
	</section>

    <main>

    </main>
</body>

</html>

and my css file:



body {
    font-family: sans-serif;
}



.hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;  
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;
    color: white; /* ADD THIS LINE */

    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('main.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;




}

.hero h1{
	color: white; /* ADD THIS LINE */
	font-size:3em;
	margin-top: 0;
    margin-bottom: 0.5em;
}


.hero .btn {
    /* Positioning and sizing */
    display: block;
    width: 200px;
    
    /* Padding and margins */
    padding: 1em;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    
    /* Text styles */
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    
    /* Border styles */
    border: 3px solid white;
    border-radius: 20px;
    
    /* Background styles */
    background-color: rgba(147, 112, 219, 0.8);
}

I have created a hero image and I want it to take the full screen size. However, I cant understand does it create a larger website than my screen size? I am able to slide left/right a tiny bit:

In Google Chrome, there appears to be a default 8px margin assigned to the body tag. (You can see this by examining your layout using the Developer Tools.)

Changing your css to specify a 0px margin on the body element seems to fix this:

body {
    font-family: sans-serif;
    margin: 0px;
}

Hey thanks for the response. It did not seem to fix an issue:
A strange thing I have noticed. When I first run the webserver the size seems fine - I do not have the slide right/left menu on the bottom of the screen. When i refresh the page, the menu appears.

I have managed to find a solution:
Instead of using

width: 100vw;

use :

width:100%;

What are the differences between these two?

Interesting - I don’t see that behavior. Try setting the style directly in the body tag rather than through the css file. It may be a timing issue of the rendering engine. (Pure guess on my part)

The units of vw and vh are based on the viewport window, while % is based on the parent container. It makes a difference for a component contained within a parent component.

Thanks for the clarification… I guess I could also just use the % instead? Or that is not recommended over vw ?

It’s not that one is recommended over the other, or that one is right and the other is wrong - it’s that they serve two different purposes. You want to use the one that works for you and makes things look the way you want them to look. In either case, if you want to avoid the implicit margin created by the body tag, you will need to set its margin to 0.

Understood. I still cannot get this margin sorted out. However, I have noticed one more strange thing that will hopefully help solve the problem. On my website, I am able to move left/right as I have previously mentioned but only the text in the middle of the screen where it says “text text text” ,“look at this website” and a button moves.
The header and the logo remains still even when I move left/right so that makes me think that something is wrong with the text which is on top of my hero image?

	<section class="hero">
	    <div class="hero-inner">
	        <h1>text text text text</h1>
	        <h2>Look at this website and bask in its amazing glory!</h2>
	        <a href="https://example.com/" class="btn">Book5 now.</a>
	    </div>
	</section>

Okay actually I have manged to narrow down the problem a bit. It seems that its the text that I use in my main body causes that problem.

    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec nibh molestie, efficitur leo sed, viverra nunc. Donec vehicula accumsan erat facilisis ullamcorper. Donec commodo quis dui nec placerat. Donec mi orci, scelerisque eget nisl ac, hendrerit condimentum odio. Nam dictum odio eget quam tempus, a mattis odio ornare. Nullam auctor libero ut libero suscipit, ut accumsan nunc condimentum. Donec ullamcorper maximus sapien quis egestas.</p>

        <p>Mauris viverra scelerisque lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ultrices enim sit amet elit tincidunt maximus. Suspendisse vitae pellentesque lectus. Duis commodo leo suscipit augue mollis, non venenatis dolor ullamcorper. Duis tincidunt scelerisque lacus, vel vehicula leo consectetur vel. Duis posuere nisl non odio consequat ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <p>Etiam a leo nec mi blandit euismod. Etiam fringilla odio vitae risus ornare, id bibendum velit consequat. Fusce posuere risus sollicitudin condimentum ultrices. Fusce gravida, purus eget laoreet mattis, velit sapien ultrices diam, id dapibus erat leo id quam. Maecenas quis risus convallis, placerat elit non, iaculis tortor. Nullam porttitor magna risus, quis bibendum metus tincidunt in. Etiam vel ligula ac risus mattis tincidunt vel sit amet ante. Morbi et viverra ligula. Ut ac dignissim nisi, condimentum imperdiet mauris. Pellentesque ut ipsum vel diam tristique faucibus eu et lectus. Maecenas posuere neque non lacus bibendum, sit amet pharetra justo semper. Sed mi risus, tempor sit amet ligula eget, varius pretium est. Sed a odio in orci accumsan pretium suscipit ut quam.</p>

But its withing the body tags so it should be fine right??

You’ve kinda lost me here with these last two messages.

What is it that you’re hoping to have happen, and what is happening? (And can you confirm that the css you posted originally is still the right css at this point?)

my css:


body {
    padding:0px;
    margin: 0px;
    font-family: sans-serif;
}

.hero {
    /* Sizing */
    width: 100vw;
    height: 100vh;  
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;
    color: white; /* ADD THIS LINE */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('main.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.hero h1{
    font-size:5em;
    margin-top: 0;
    margin-bottom: 0.5em;
}
.hero .btn {
    /* Positioning and sizing */
    display: block;
    width: 200px;
    
    /* Padding and margins */
    padding: 1em;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    /* Text styles */
    text-decoration: none;
    font-size: 1.5em;
    
    /* Border styles */
    border: 3px solid white;
    border-radius: 20px;
    /* Background styles */
    background-color: rgba(147, 112, 219, 0.8);
}

header {
    top:0;
    right:0;
    left:0;
    background-color: white;
    display: flex;
    align-items: center;
    position: fixed;
    min-height: 8vh;
}
/*
header * {

    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    font-size:2em;
    color: black;
    text-decoration: none;
}
*/
header img {
    margin: 0px;
    height: 80px;
}


.nav-links{

    display: flex;
    justify-content: space-around;
    width:40%;
}
.nav-links a{
    font-size:1em;
    color:green;
    color: black;
    text-decoration:none;
    font-weight:bold;
}

.nav-links li{
    display: inline;
}

.burger div{
    width:25px;
    height:5px;
    background-color:black;
    margin:5px;

}

.burger{
    display:none;
}

@media screen and (max-width:768px) {
    body{
        display:none;
    }

    
}

and my index file now:

<!DOCTYPE html>
{% load static %}

<html>
<head>
	<link rel="stylesheet" href="{%static 'css/main.css' %}">
	<meta charset="UTF-8">
    <title>My awesome website</title>
</head>
<body>
	<header>
		<img src="{%static 'baltu_vila_logo.png' %}">
	    <ul class="nav-links">
		    <li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Pricing</a></li>
			<li><a href="#">Terms of use</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		<div class="burger">
			<div class="line1"></div>
			<div class="line2"></div>
			<div class="line3"></div>
		</div>
	</header>

	<section class="hero">
	    <div class="hero-inner">
	        <h1>text text text text</h1>
	        <h2>Look at this website and bask in its amazing glory!</h2>
	        <a href="https://example.com/" class="btn">Book5 now.</a>
	    </div>
	</section>
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec nibh molestie, efficitur leo sed, viverra nunc. Donec vehicula accumsan erat facilisis ullamcorper. Donec commodo quis dui nec placerat. Donec mi orci, scelerisque eget nisl ac, hendrerit condimentum odio. Nam dictum odio eget quam tempus, a mattis odio ornare. Nullam auctor libero ut libero suscipit, ut accumsan nunc condimentum. Donec ullamcorper maximus sapien quis egestas.</p>

        <p>Mauris viverra scelerisque lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ultrices enim sit amet elit tincidunt maximus. Suspendisse vitae pellentesque lectus. Duis commodo leo suscipit augue mollis, non venenatis dolor ullamcorper. Duis tincidunt scelerisque lacus, vel vehicula leo consectetur vel. Duis posuere nisl non odio consequat ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <p>Etiam a leo nec mi blandit euismod. Etiam fringilla odio vitae risus ornare, id bibendum velit consequat. Fusce posuere risus sollicitudin condimentum ultrices. Fusce gravida, purus eget laoreet mattis, velit sapien ultrices diam, id dapibus erat leo id quam. Maecenas quis risus convallis, placerat elit non, iaculis tortor. Nullam porttitor magna risus, quis bibendum metus tincidunt in. Etiam vel ligula ac risus mattis tincidunt vel sit amet ante. Morbi et viverra ligula. Ut ac dignissim nisi, condimentum imperdiet mauris. Pellentesque ut ipsum vel diam tristique faucibus eu et lectus. Maecenas posuere neque non lacus bibendum, sit amet pharetra justo semper. Sed mi risus, tempor sit amet ligula eget, varius pretium est. Sed a odio in orci accumsan pretium suscipit ut quam.</p>
    </main>
</body>

</html>

The message in main body:

 <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec nibh molestie, efficitur leo sed, viverra nunc. Donec vehicula accumsan erat facilisis ullamcorper. Donec commodo quis dui nec placerat. Donec mi orci, scelerisque eget nisl ac, hendrerit condimentum odio. Nam dictum odio eget quam tempus, a mattis odio ornare. Nullam auctor libero ut libero suscipit, ut accumsan nunc condimentum. Donec ullamcorper maximus sapien quis egestas.</p>

        <p>Mauris viverra scelerisque lobortis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ultrices enim sit amet elit tincidunt maximus. Suspendisse vitae pellentesque lectus. Duis commodo leo suscipit augue mollis, non venenatis dolor ullamcorper. Duis tincidunt scelerisque lacus, vel vehicula leo consectetur vel. Duis posuere nisl non odio consequat ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
        <p>Etiam a leo nec mi blandit euismod. Etiam fringilla odio vitae risus ornare, id bibendum velit consequat. Fusce posuere risus sollicitudin condimentum ultrices. Fusce gravida, purus eget laoreet mattis, velit sapien ultrices diam, id dapibus erat leo id quam. Maecenas quis risus convallis, placerat elit non, iaculis tortor. Nullam porttitor magna risus, quis bibendum metus tincidunt in. Etiam vel ligula ac risus mattis tincidunt vel sit amet ante. Morbi et viverra ligula. Ut ac dignissim nisi, condimentum imperdiet mauris. Pellentesque ut ipsum vel diam tristique faucibus eu et lectus. Maecenas posuere neque non lacus bibendum, sit amet pharetra justo semper. Sed mi risus, tempor sit amet ligula eget, varius pretium est. Sed a odio in orci accumsan pretium suscipit ut quam.</p>
    </main>

seems to be causing the problems now. When I delete the code above from my index file, I do not have any problems with website exceeding the screen width. I am trying to figure out what is causing the problem. I have margin:0px; in my css file and the text is within the body tags so it should have 0px margins and yet it causes the problem

When I try this, the text extends below the bottom of the viewport. That causes the scroll bar to appear on the right. That reduces the usable viewport width causing the scroll bar at the bottom.

Oh that makes sense now… I should probably use width 100% then which avoids this issue! Thanks a lot now I understand how viewport works