There is a mysterious gap within a flexbox that has a column direction.
In the header-left div, I have set up a flexbox with a column direction. It consists of three nested divs: left_text_heading, hero-img, and hero-text. Strangely, there is an unknown space between the hero-img and hero-text elements despite no margin or padding being applied to them. Click here to see the red area where this space exists.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #091A29;
font-family: 'DM Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.container{
margin-left: 80px;
}
.header{
width: 100%;
display: flex;
}
.header-left{
display: flex;
flex-direction: column;
width: 584px;
margin-top: 38px;
}
.nav{
display: flex;
align-items: center;
margin-bottom: 25px;
}
.nav>ul{
display: flex;
list-style: none;
gap: 68px;
}
.nav>ul>li>a{
text-decoration: none;
color: #193A58;
}
.left_text_heading{
display: flex;
align-items: center;
justify-content: flex-start;
height: 366px;
margin-top: 25px;
font-weight: bold;
}
.left_text_heading > h1{
position: relative;
font-size: 500px;
left: -35px;
color: #183a58;
}
.hero-img{
display: flex;
align-items: center;
justify-content: center;
width: 144px;
position: relative;
bottom: 75px;
}
.hero-text{
width: 550px;
display: flex;
flex-direction: column;
}
.hero-text>p{
font-weight: 400;
font-size: 50px;
line-height: 65px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortFolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="header-left">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="left_text_heading">
<h1>HI</h1>
</div>
<div class="hero-img">
<img src="./images/person.svg" alt="person">
</div>
<div class="hero-text">
<p>My name is Shallom, I am a product designer</p>
</div>
</div>
<div class="header-right"></div>
</div>
</div>
</body>
</html>