I’m a beginner in html and css and currently i’m working on a project.I don’t know why there’s large empty space at the top of my page.I have tried debugging as much as possible but i didn’t get it.I’m trying to center the code horizontally and vertically but i just have a large space at the top of my container.Here’s the code
/*base styles*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: 15px;
}
/*Card Styles*/
body {
position: relative;
background-color: hsl(0, 0%, 95%);
}
.container {
width: 58%;
max-width: 550px;
display: grid;
grid-template-columns: 1fr;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
}
main > div {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.9em;
}
.sedans {
background-color: hsl(31, 77%, 52%);
}
.SUVS {
background-color: hsl(184, 100%, 22%);
}
.luxury {
background-color: hsl(179, 100%, 13%);
}
p {
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.5;
}
h1 {
color: hsl(0, 0%, 95%);
text-transform: uppercase;
}
button {
display: inline-block;
background-color: hsl(0, 0%, 95%);
padding: 0.7em;
cursor: pointer;
border-radius: 20px;
border: none;
outline: none;
width: 110px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<title>Frontend Mentor | 3-column preview card component</title>
</head>
<body>
<main class="container">
<div class="sedans">
<div><image src="images/icon-sedans.svg" alt=""></div>
<h1>Sedans</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.</p>
<button>Learn more</button>
</div>
<div class="SUVS">
<div><image src="images/icon-suvs.svg" alt=""></div>
<h1>SUVs</h1>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.</p>
<button>Learn more</button>
</div>
<div class="luxury">
<div><image src="images/icon-luxury.svg" alt=""></div>
<h1>Luxury</h1>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.</p>
<button>Learn more</button>
</div>
</main>
</body>
</html>
3
Answers
By the inspect tool(right click / F12 -> the element tab), you can check the range that each elements covered.
Then you can know your element which has the class "container" already have space from top.
Next step, check class / styles attached on that class, you will find out the style making the space is
You can just modify the value to see is the one causing the issue, and change the value to fit your requirement.
Looks like you are trying to vertically center
.container.Because the body’s height is 0,
top: 50%does nothing and keeps the.containerat the top, then you are moving.containerby half of its height down withtransform: translate(-50%,50%);.Give body the height of
100vhand fix the transform totranslate(-50%,-50%)and it will work.