So I have completed the Tea Cozy project and it gave me quite some practice (had to redo my css after deleting it by accident when I was done!). There are two things however I couldn’t get quite right and I would like some input on this. You find the codes below my questions and a live version on this github page.
I have a fixed navigation bar, but when I press one of the links and it jumps to that location on the page there is a part covered by the fixed navigation bar. You can best see this when clicking on featured tea. Thea of the Month (the title of the part jumped to) is “behind” the nav bar. I would like to have it under the nav bar. How can I do that?
Second question is about the Tea of the Month section. The two tea’s on the second row (myrtle and bedford aren’t aligned nicely as shown in the example (the room between them is too large). What can I do to change that since I’m using flexbox?
Thanks in advance! 
<!DOCTYPE html>
<html>
<head>
<title>The Tea Cozy</title>
<link rel="stylesheet" href="./stylesheet.css" type="text/css"/>
</head>
<body>
<nav>
<img src="./Images/img-tea-cozy-logo.png" class="imglogo" alt="Tea Cozy logo">
<section class="navlinks">
<a href="#mission">Mission</a>
<a href="#featured">Featured tea</a>
<a href="#place">Locations</a>
</section>
</nav>
<header>
<section class="header_text" id="mission">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</section>
</header>
<main>
<section class="teamonth" id="featured">
<h2>Tea of the Month</h2>
<h4>What's sleeping at the Tea Cozy?</h4>
<section class="teaimg">
<section class="berry">
<img src="./Images/img-berryblitz.jpg" class="berry_img" alt="Berry blitz tea">
<p>Fall Berry Blitz tTea</p>
</section>
<section class="spiced">
<img src="./Images/img-spiced-rum.jpg" class="spiced_img" alt="Spiced rum">
<p>Spiced Rum Tea</p>
</section>
<section class="donut">
<img src="./Images/img-donut.jpg" class="donut_img" alt="Donut">
<p>Seasonal Donut</p>
</section>
<section class="myrtle">
<img src="./Images/img-myrtle-ave.jpg" class="myrtle_img" alt="Mytrle Ave tea">
<p>Myrtle Ave Tea</p>
</section>
<section class="bedford">
<img src="./Images/img-bedford-bizarre.jpg" class="bedford_img" alt="Bedford Bizarre Tea">
<p>Bedford Bizarre Tea</p>
</section>
</section>
</section>
<section class="location" id="place">
<h2>Locations</h2>
<section class="adres">
<section class="downtown">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</section>
<section class="east">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</section>
<section class="oakdale">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</section>
</section>
</section>
</main>
<footer>
<section class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<p>917-555-8904</p>
</section>
<section class="copyright">
<p>copyright The Tea Cozy 2017</p>
</section>
</footer>
</body>
</html>
* {
font-family: helvetica;
font-size: 22px;
color: seashell;
opacity: 0.9;
text-align: center;
}
body {
background-color: black;
}
nav {
background-color: transparent;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
z-index: 2;
}
.navlinks {
float: right;
padding-top: 16px;
}
.navlinks a {
padding: 16px;
}
.imglogo {
float: left;
height: 50px;
margin-left: 10px;
margin-top: 10px;
}
header {
background-image: url(./Images/img-mission-background.jpg);
height: 700px;
width: 1200px;
margin: auto;
margin-top: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.header_text {
background-color: black;
width: 1200px;
}
.teamonth {
width: 1000px;
margin: auto;
}
.teaimg {
display: flex;
justify-content: space-around;
align-content: space-between;
flex-wrap: wrap;
}
.berry_img,
.spiced_img,
.donut_img,
.myrtle_img,
.bedford_img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.location {
background-image: url(./Images/img-locations-background.jpg);
height: 500px;
width: 1200px;
margin: auto;
}
.location h2 {
padding-top: 150px;
}
.adres {
display: flex;
justify-content: center;
margin-top: 15px;
opacity: 1;
}
.downtown,
.east,
.oakdale {
background-color: black;
width: 300px;
}
.downtown,
.east {
margin-right: 40px;
}
.contact {
height: 200px;
}
.copyright{
float: left;
margin-left: 20px;
}
