Have an unwanted gap between by Navbar and my Header Background image-CodePudding

I used flexbox for my header background image, and my Navigation Bar. But for reason, there's 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 >
            <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">Maintanence</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 don't see any padding or margins affecting the gap but I might have missed something. If I could get this cleared up, I would greatly appreciate it!

CodePudding user response：

I think you should try the following, just add this and try again

nav{
  margin-top: 0; /* Or any other value you want */
}

If This doesnt work try adding this to your css

main{
margin-top: 0; /* Or any other value you want*/
}

CodePudding user response：

You can change height in css .headercontainer

height: 35vw; to height: 30vw;

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: 30vw;
  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;
}