I encountered an issue with using flexbox for my header background image and Navigation Bar - there seems to be a gap between the two components.
Screenshot
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>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<img src="images/manifestspace.png" style="width: 30vw; margin-bottom: 10vw;">
<img src="images/welcomehome.png" style="width: 50vw; margin-bottom: 1vw;">
<img src="images/buysell.png" style="width: 50vw;">
</div>
<main>
<nav>
<ul>
<li><a href="#Owners">Owners</a></li>
<!-- <li><a href="#Properties">Properties</a></li> -->
<li><a href="#Property-Managers">Property-Managers</a></li>
<li><a href="#Tenants">Tenants</a></li>
<li><a href="#Maintanence">Maintenance</a></li>
</ul>
</nav>
</main>
</body>
</html>
CSS:
.headercontainer {
display: flex;
align-items: center;
flex-direction: column;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
/* row-gap: 4vw; */
}
body {
margin: 0;
}
nav ul {
background-color: #181919;
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex;
padding: 15px;
justify-content: space-evenly;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 0 10px;
}
I have checked for any padding or margins causing the gap but couldn't find anything obvious. Any assistance in resolving this would be highly appreciated!