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