Why does my website create extra space when adding elements in HTML? - html

Question

When I proceed to add elements like images, or more words in the lorem ipsum generator, it seems like some space is created. I have not had any luck finding it in the inspect mode. Also occurs when adding an image. But the example shown occurs when using for example the lorem ipsum generator, creating 100 words, and suddenly there spawns space all over the place.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
grid-area: 1 / 1 / 2 / 6;
display: flex;
justify-content: center;
background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
height: fit-content;
padding: 25px 0;
border-bottom: solid white 2px;
}
.menu {
grid-area: 2 / 1 / 3 / 6;
background-image: linear-gradient(141deg, #1fc8db 51%, #2cb5e8 75%);
height: fit-content;
padding: 20px 0;
}
ul {
list-style-type: none;
text-decoration: none;
width: 100%;
text-align: center;
}
.menu li {
padding-left: 30px;
padding-right: 30px;
}
li {
display: inline;
}
ul li a {
color: white;
text-decoration: none;
font-size: 24px;
}
ul li a:hover {
text-decoration: underline;
}
.side {
grid-area: 3 / 1 / 5 / 2;
}
.main {
grid-area: 3 / 2 / 5 / 6;
float: left;
display: flex;
justify-content: left;
}
.side,
.main {
padding: 10px;
}
.footer {
grid-area: 5 / 1 / 6 / 6;
display: flex;
justify-content: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
<div class="grid-container">
<div class="header">Øving 1</div>
<div class="menu">
<ul>
<li>Hjem</li>
<li>Om oss</li>
<li>Kontakt</li>
<li>Bestill</li>
</ul>
</div>
<div class="side">
<h3>Side</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error suscipit nesciunt quos porro ex dignissimos unde officia. Similique, molestiae cum ullam quam placeat quisquam sunt ratione suscipit officiis, soluta dolorem.</p>
</div>
<div class="main">
<div class="p">
<h3>Content</h3>
<p>test</p>
</div>
<div class="img">
</div>
</div>
<div class="footer">
<h2>Copyright © Erik Skjellevik 2022</h2>
</div>
</div>

Answer 1

You must change that in CSS file:
//OLD
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
//NEW
.grid-container {
display: grid;
}

Answer 2

According to my knowledge the space creation is by default property of the software so because of this your website create extra space. But to solve this problem you can use margin and padding = 0 after that no space will be created
in your website

Answer 3

The extra space is by default property. For fixing it, set the margin and padding to 0.
OR
For different resolutions, use media queries and for different pixels, you have to set it.