I am trying to improve my css skills by practicing making and cloning various projects , I was practicing this nft project from frontendmentor and faced this problem , A vertical scrollbar always appear on my web page and I don't know why is this happening , I have tried changing the height of my main container from 50% to 33% but the problem remains the same , I am attaching the code for your reference
@import url(https://fonts.google.com/specimen/Outfit);
:root {
--Soft-blue: hsl(215, 51%, 70%);
--Cyan: hsl(178, 100%, 50%);
--Very-dark-blue1: hsl(217, 54%, 11%);
--Very-dark-blue2: hsl(216, 50%, 16%);
--Very-dark-blue3: hsl(215, 32%, 27%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--Very-dark-blue1);
color: var(--White);
font-family: "Outfit", sans-serif;
font-size: 18px;
}
.container {
width: 33%;
height: 50%;
margin: 3em auto;
overflow: hidden;
background-color: var(--Very-dark-blue2);
border-radius: 12px;
display: flex;
flex-direction: column;
text-align: left;
}
.nft {
width: 100%;
height: 40%;
border-radius: 12px;
}
.nft img {
width: 100%;
height: 100%;
padding: 2em;
border-radius: 12%;
}
h3.title-nft {
color: var(--White);
padding: 0 1.5em;
}
p.info {
color: var(--Soft-blue);
font-weight: 300;
padding: 1.75em;
letter-spacing: 0.1em;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
}
li {
padding: 1.75em;
}
li.eth {
color: var(--Cyan);
}
li.clock {
color: var(--Soft-blue);
}
hr {
width: 80%;
margin: 0 auto;
border-color: var(--Very-dark-blue3);
}
.footer {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 2em;
}
.footer img {
border-radius: 50%;
width: 3em;
border: 2px solid var(--White);
margin-right: 1.75em;
}
.footer p {
color: var(--Soft-blue);
}
.footer span {
color: var(--White);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />
<title>Frontend Mentor | NFT preview card component</title>
</head>
<body>
<div class="container">
<div class="nft">
<img src="images/image-equilibrium.jpg" />
</div>
<div class="main-content">
<h3 class="title-nft">Equilbirium #3429</h3>
<p class="info">Our Equilibirum collection promotes balance and calm</p>
<div class="side-details">
<ul>
<li class="eth">
<img src="images/icon-ethereum.svg" /> 0.041 ETH
</li>
<li class="clock">
<img src="images/icon-clock.svg" /> 3 Days Left
</li>
</ul>
</div>
</div>
<hr />
<div class="footer">
<img src="images/image-avatar.png" />
<p class="creator">
Creation of <span class="wrapper">Jules Wyvern </span>
</p>
</div>
</div>
</body>
</html>