I´m working on a small website that uses a <div class="wrapper"> around its content.
Problem is, that a white space is added to the right and bottom, see screenshot:
My HTML looks like this, currently:
:root {
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 2px 5px rgba(104, 104, 104, 0.8);
}
html * {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
min-height: 100vh;
background-color: lightgray;
}
.nav {
overflow: hidden;
position: fixed;
/*top: 15px;*/
width: 100%;
text-align: center;
}
.nav > ul {
list-style-type: none;
display: inline-block;
margin: 0;
height: 45px;
padding: 0;
padding-top: 5px;
box-shadow: var(--shadow);
border-radius: 0 0 8px 8px;
background-color: white;
}
.nav > ul > li{
display: inline;
float: left;
}
.nav a {
color: dimgrey;
padding: 14px 16px;
text-decoration: none;
font-size: 2em;
}
.home {
display: grid;
margin: 5vh 5vh 5vh 5vh;
margin-top: 65px;
min-height: 90vh;
cursor: default;
color: dimgrey;
background-color: white;
border-radius: 16px;
box-shadow: var(--shadow);
}
.text {
border-radius: 16px;
}
.image {
grid-area: image;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('schach.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 16px 0px 0px 16px;
}
.info {
display: grid;
margin: 5vh 5vh 5vh 5vh;
margin-top: 65px;
min-height: 90vh;
background-color: white;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('code.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
cursor: default;
color: dimgrey;
border-radius: 16px;
box-shadow: var(--shadow);
}
.headlines {
text-align: right;
font-weight: bold;
background: rgba(255, 255, 255, 0.8);
padding-top: 25px;
box-shadow: var(--shadow);
height: auto;
}
.contact {
display: grid;
margin: 5vh 5vh 5vh 5vh;
margin-top: 65px;
min-height: 90vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url('oldphones.jpg');
background-repeat: no-repeat;
background-position: center;
cursor: default;
color: dimgrey;
background-color: white;
border-radius: 16px;
box-shadow: var(--shadow);
}
.footer {
width: 100%;
height: 20px;
text-align: center;
}
.footer > ul {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 10px 0 10px 0;
box-shadow: var(--shadow);
border-radius: 8px 8px 8px 8px;
background-color: white;
}
.footer > ul > li {
display: inline;
float: left;
}
.footer a {
color: dimgrey;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
} <div class="nav">
<ul>
<li>
<a href="#home">
<i class="fas fa-home"></i>
</a>
</li>
<li>
<a href="#info">
<i class="fas fa-info-circle"></i>
</a>
</li>
<li>
<a href="#contact">
<i class="fas fa-comments"></i>
</a>
</li>
</ul>
</div>
<div class="wrapper">
<span id="home"></span>
<div class="home">
<div class="image"></div>
<div class="text">
<div class="text_content">
<h4>headlinesmall</h4>
<h2>headlinebig</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
<span id="info"></span>
<div class="info">
<p class="headlines">
<span class="headlinesmall">headlinesmall</span><br />
<span class="headlinebig">headlinebig</span><br /><br />
<span class="info_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</span>
</p>
<div class="slider">
<div class="slider_content">
<p class="slider_content_text">Label 01</p>
<p class="slider_content_text">Label 02</p>
<p class="slider_content_text">Label 03</p>
<p class="slider_content_text">Label 04</p>
<p class="slider_content_text">Label 05</p>
<p class="slider_content_text">Label 06</p>
</div>
</div>
</div>
<span id="contact"></span>
<div class="contact">
<div class="contactimage"></div>
<form></form>
</div>
<div class="footer">
<ul>
<li>
<a href="#home">
Datenschutz
</a>
</li>
<li>
<a href="#info">
Impressum
</a>
</li>
</ul>
</div>
</div>I of course tried to remove margins, paddings, set the min-width to 100% resp. 100vw, to work without a wrapper, removed box-sizing: border-box but I can´t find my mistake.
That small navigation box at the top takes the full device width, it is positioned outside the wrapper. When I put it inside the wrapper it takes the full width, too. But somehow removing the wrapper does not solve the problem, so I think the mistake must be placed somewhere at the wrappers´ content?
EDIT: So I found out that setting the wrappers width to 111vw makes it fill out the white space, but I don´t see why. However, increasing the min-height of the wrapper does not result in removing the bottom white space.
EDIT 2: The snippet seems to work here, so I tried different browsers like IE - width 100% does work there, but not in Chrome. What might be the reason, is the css faulty?
EDIT 3: Might the problem be related to CSS Grid? The code behaves differently in any tested browser. Edge, IE, Firefox, Chrome...
