Issue
This is the code for an ‘About’ Page on my website. I am trying to create a gap between the first element, which is the burgundy box, and the header of the page. However, every time I do that it adds white space between them? Is there anything I can do/fix without the white space issue happening?
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 100%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search{
float: right;
margin-bottom: 1%;
margin-right: 7%;
position: relative;
margin-top: 1.7%;
}
nav input[type=text]{
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav .search input[type="text"]:focus {
width: 200px;
outline : none;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a{
color: rgb(95, 62, 64);
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(95, 62, 64);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(95, 62, 64);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.main-bg{
background-image: url("bg-two.jpg");
height: auto;
padding-top: 0;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera*/
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.footer *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-two{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.footer ul{
list-style: none;
}
.footer{
background-color: rgb(241, 200, 203);
width: auto;
margin: auto;
padding-top: 3%;
line-height: 1.5;
}
.footer .container-bottom{
padding-left: 12%;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h5{
font-size: 112.5%;
color: rgb(126, 81, 83);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
}
.footer-col h5::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: rgb(82, 44, 46);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: rgb(126, 81, 83);
text-decoration: none;
font-weight: 600;
display: block;
}
.fab{
color:rgb(126, 81, 83);
margin-right: 10px;
}
.copyright{
margin-top: 5%;
text-align: center;
background-color: rgb(126, 81, 83);
color:rgb(240, 178, 182);
padding: 1%;
padding-left: 0%;
margin-bottom: 0%;
}
article h2{
color: rgb(240, 178, 182);
font-size: 280%;
text-align: center;
margin-top: 0%;
border-bottom: 1px solid rgb(240, 178, 182);
padding-bottom: 3px;
}
article p{
color:rgb(240, 178, 182);
font-size: 110%;
text-align: center;
}
.lifestyle{
height: 100%;
border:rgb(82, 44, 46);
background-color: rgb(82, 44, 46);
margin-left: 15%;
margin-right: 15%;
top: 15%;
position: relative;
}
.lifestyle img{
margin: 5%;
width: 35%;
height: 50%;
position: relative;
}
.text-lifestyle{
top: 0%;
position: absolute;
margin-left:50%;
margin-top: 20%;
padding-right:20%;
box-sizing: border-box;
}
.entertainment{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.entertainment img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
.text-entertainment{
position: absolute;
margin: 15%;
top: 30%;
left: 7.5%;
box-sizing: border-box;
width: 30%;
}
.food{
height: 100%;
background-color:rgb(82, 44, 46);
margin: 15%;
}
.food img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
}
.text-food{
position: absolute;
top: 66.5%;
right: 22.5%;
box-sizing: border-box;
width: 30%;
}
.shopping{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.shopping img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
@media screen and (max-width: 768px) {
body{
font-size: 80%;
}
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
This is the HTML, some parts are incomplete but I'm concerned with the 'lifestyle' class for this issue.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="nyc-logo.png" alt="logo" class="logo"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contacts</a></li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class = "main-bg">
<article>
<div class = "lifestyle">
<img src='abt-one.jpg' alt />
<div class="text-lifestyle">
<h2>LIFESTYLE</h2>
<p>New York hosts its guests with some of the best 5-star hotels and restaurants, leisure activities and more.<br/>
Relax your mind and enjoy the breathtaking views of what New York has to offer...</p>
</div>
</div>
<div class = "entertainment">
<img src='abt-two.jpg' alt />
<div class="text-entertainment">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>ENTERTAINMENT</h2>
<p style= 'color: rgb(82, 44, 46);'>Music and entertainment is a big thing in this great city. Everywhere you go, entertainment will be right at your feet. Enjoy first class musicals at BroadWay Theatre or watch busking take place free of charge!</p>
</div>
</div>
<div class = "food">
<img src='abt-three.jpg' alt />
<div class="text-food">
<h2>FOOD</h2>
<p>Enjoy some of the best cuisines across the city.<br/>
From classic burgers to jaw-dropping desserts, there's nothing to miss out on.</p>
</div>
</div>
<div class = "shopping">
<img src='abt-four.jpg' alt />
<div class="text-shopping">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>SHOPPING</h2>
<p style= 'color: rgb(82, 44, 46);'>Feeling like treating yourself with some fancy shoes? New York streets are lined with fabulous, glamourous shops, all endorsed with the latest trends from across the world.</p>
</div>
</div>
</article>
<footer class="footer">
<div class="container-bottom">
<div class="row">
<div class="footer-col">
<h5>New York</h5>
<p style="color: rgb(126, 81, 83); font-weight: 600;">The largest and most influential American metropolis</p>
</div>
<div class="footer-col">
<h5>Links</h5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><div class="footer-col">
<h5>Extras</h5>
<ul>
<li><a href="https://www1.nyc.gov/">Official NYC</a></li>
<li><a href="https://nymag.com/">New York Magazine</a></li>
<li><a href="https://ny.eater.com/">Eater New York</a></li>
<li><a href="https://ny.curbed.com/">Curbed NY</a></li>
</ul>
</div><div class="footer-col">
<h5>Socials</h5>
<div>
<a href="https://www.facebook.com/nycgo/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/nycgov?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/nycgov/?hl=en"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright">
<small>© New York 2021 | Designed by Priya Patel</small>
</div>
</footer>
</div>
</body>
</html>Solution
You can use padding-top in .main-bg for that:
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 100%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search{
float: right;
margin-bottom: 1%;
margin-right: 7%;
position: relative;
margin-top: 1.7%;
}
nav input[type=text]{
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav .search input[type="text"]:focus {
width: 200px;
outline : none;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a{
color: rgb(95, 62, 64);
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(95, 62, 64);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(95, 62, 64);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.main-bg{
background-image: url("https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj");
height: auto;
padding-top: 1em;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera*/
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.footer *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-two{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.footer ul{
list-style: none;
}
.footer{
background-color: rgb(241, 200, 203);
width: auto;
margin: auto;
padding-top: 3%;
line-height: 1.5;
}
.footer .container-bottom{
padding-left: 12%;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h5{
font-size: 112.5%;
color: rgb(126, 81, 83);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
}
.footer-col h5::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: rgb(82, 44, 46);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: rgb(126, 81, 83);
text-decoration: none;
font-weight: 600;
display: block;
}
.fab{
color:rgb(126, 81, 83);
margin-right: 10px;
}
.copyright{
margin-top: 5%;
text-align: center;
background-color: rgb(126, 81, 83);
color:rgb(240, 178, 182);
padding: 1%;
padding-left: 0%;
margin-bottom: 0%;
}
article h2{
color: rgb(240, 178, 182);
font-size: 280%;
text-align: center;
margin-top: 0%;
border-bottom: 1px solid rgb(240, 178, 182);
padding-bottom: 3px;
}
article p{
color:rgb(240, 178, 182);
font-size: 110%;
text-align: center;
}
.lifestyle{
height: 100%;
border:rgb(82, 44, 46);
background-color: rgb(82, 44, 46);
margin-left: 15%;
margin-right: 15%;
top: 15%;
position: relative;
}
.lifestyle img{
margin: 5%;
width: 35%;
height: 50%;
position: relative;
}
.text-lifestyle{
top: 0%;
position: absolute;
margin-left:50%;
margin-top: 20%;
padding-right:20%;
box-sizing: border-box;
}
.entertainment{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.entertainment img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
.text-entertainment{
position: absolute;
margin: 15%;
top: 30%;
left: 7.5%;
box-sizing: border-box;
width: 30%;
}
.food{
height: 100%;
background-color:rgb(82, 44, 46);
margin: 15%;
}
.food img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
}
.text-food{
position: absolute;
top: 66.5%;
right: 22.5%;
box-sizing: border-box;
width: 30%;
}
.shopping{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.shopping img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
@media screen and (max-width: 768px) {
body{
font-size: 80%;
}
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
This is the HTML, some parts are incomplete but I'm concerned with the 'lifestyle' class for this issue.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="nyc-logo.png" alt="logo" class="logo"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contacts</a></li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class = "main-bg">
<article>
<div class = "lifestyle">
<img src='abt-one.jpg' alt />
<div class="text-lifestyle">
<h2>LIFESTYLE</h2>
<p>New York hosts its guests with some of the best 5-star hotels and restaurants, leisure activities and more.<br/>
Relax your mind and enjoy the breathtaking views of what New York has to offer...</p>
</div>
</div>
<div class = "entertainment">
<img src='abt-two.jpg' alt />
<div class="text-entertainment">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>ENTERTAINMENT</h2>
<p style= 'color: rgb(82, 44, 46);'>Music and entertainment is a big thing in this great city. Everywhere you go, entertainment will be right at your feet. Enjoy first class musicals at BroadWay Theatre or watch busking take place free of charge!</p>
</div>
</div>
<div class = "food">
<img src='abt-three.jpg' alt />
<div class="text-food">
<h2>FOOD</h2>
<p>Enjoy some of the best cuisines across the city.<br/>
From classic burgers to jaw-dropping desserts, there's nothing to miss out on.</p>
</div>
</div>
<div class = "shopping">
<img src='abt-four.jpg' alt />
<div class="text-shopping">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>SHOPPING</h2>
<p style= 'color: rgb(82, 44, 46);'>Feeling like treating yourself with some fancy shoes? New York streets are lined with fabulous, glamourous shops, all endorsed with the latest trends from across the world.</p>
</div>
</div>
</article>
<footer class="footer">
<div class="container-bottom">
<div class="row">
<div class="footer-col">
<h5>New York</h5>
<p style="color: rgb(126, 81, 83); font-weight: 600;">The largest and most influential American metropolis</p>
</div>
<div class="footer-col">
<h5>Links</h5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><div class="footer-col">
<h5>Extras</h5>
<ul>
<li><a href="https://www1.nyc.gov/">Official NYC</a></li>
<li><a href="https://nymag.com/">New York Magazine</a></li>
<li><a href="https://ny.eater.com/">Eater New York</a></li>
<li><a href="https://ny.curbed.com/">Curbed NY</a></li>
</ul>
</div><div class="footer-col">
<h5>Socials</h5>
<div>
<a href="https://www.facebook.com/nycgo/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/nycgov?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/nycgov/?hl=en"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright">
<small>© New York 2021 | Designed by Priya Patel</small>
</div>
</footer>
</div>
</body>
</html>Answered By – vanowm
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0