After adding a fixed position to my nav bar, I noticed a gap at the top. Is this caused by the display: flex; property? Any insights would be appreciated.
It seems like I need to provide a lot of information just to get an answer to this issue.
html {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 10;
background-color: black;
}
#logo img{
height: 50px;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
}
nav ul li {
text-decoration: underline;
padding-right: 20px;
}
#mission-statement-body {
position: relative;
top: 100px;
background-image: url("images/img-mission-background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 700px;
width: 1200px;
margin: 0 auto;
}
#mission-statement {
text-align: center;
background-color: black;
}<nav>
<div id="logo">
<img src="images/img-tea-cozy-logo.png" />
</div>
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</nav>
<div id="mission-statement-body">
<div id="mission-statement">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>