I recently embarked on a personal project to create my own portfolio website using HTML, CSS, and JavaScript. As I was working on styling the header section with bright colors for visualization purposes, I encountered an issue where the green box was overflowing, causing unintended spacing between "My Portfolio" and "Front End Developer." I'm seeking assistance in resolving this problem. Below is the code snippet and a reference image:
body{
margin:0;
padding:0;
box-sizing: border-box;
}
.hero-page-container{
height:100vh;
width:100vw;
padding:0px 40px;
box-sizing: border-box;
}
header{
display: flex;
align-items: center;
height:10%;
justify-content: flex-end;
background-color: aqua;
}
.header-title{
margin-right: auto;
align-items: center;
background-color: green;
}
.header-title h1{
background-color: yellow;
}
.header-title p{
background-color: orange;
}
ul{
display:flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header ul li{
display: inline-block;
margin-left:40px;
}
header ul li a{
text-decoration: none;
}
.header-contact-btn{
text-decoration: none;
margin-left:40px;
}
.hero-content{
width:100%;
background-color: red;
text-align: center;
height:50vh;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="hero-page-container">
<header>
<div class="header-title">
<h1>My Portfolio</h1>
<p>Front End Developer</p>
</div>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about"/>About</a></li>
</ul>
</nav>
<a href="#" class="header-contact-btn">Contact</a>
</header>
<div class="hero-content">
<div>
<h1>MY NAME</h1>
<button>Hire Me</button>
<button>Let's Talk</button>
</div>
</div>
</section>
</body>
</html>