Finished tea cozy project

I have finished the tea cozy project and want to know how I could improve it. I have notice that when I press the nav links it doesn’t show all of the contents in the specific containers, is there a way to fix this? I am also not completely understanding the media query part. Can anyone help?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tea Cozy</title>
    <link href="./css/styles.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header>
      <img src="./images/tea-cozy-logo.png" alt="Tea Cozy logo">
      <nav>
        <ul>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#featured-tea">Featured Tea</a></li>
          <li><a href="#locations">Locations</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="mission">
        <div class="mission-statement">
          <h2>Our Mission</h2>
          <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair</h4>
        </div>
      </section>
      <section id="featured-tea">
          <h2>Tea of the Month</h2>
          <h4>What's Steeping at The Tea Cozy?</h4>
          <figure>
            <img src="./images/berryblitz.jpg" alt="">
            <figcaption>Fall Berry Blitz Tea</figcaption>
          </figure>
          <figure>
            <img src="./images/spiced-rum.jpg" alt="">
            <figcaption>Spiced Rum Tea</figcaption>
          </figure>
          <figure>
            <img src="./images/donut.jpg" alt="">
            <figcaption>Seasonal Donuts</figcaption>
          </figure>
          <figure>
            <img src="./images/myrtle-ave.jpg" alt="">
            <figcaption>Myrtle Ave Tea</figcaption>
          </figure>
          <figure>
            <img src="./images/bedford-bizarre.jpg" alt="">
            <figcaption>Bedford Bizarre Tea</figcaption>
          </figure>
      </section>
      <section id="locations">
          <h2> Locations</h2>
          <div class="address">
            <h3>Downtown</h3>
            <p>384 West 4th St<br><br> Suite 108<br><br>Portland, Maine<p>
            </div>
            <div class="address">
              <h3>East Bayside</h3>
              <p>3433 Phisherman's Avenue<br><br>(Northwest Corner)<br><br>Portland, Maine<p>
              </div>
              <div class="address">
                <h3>East Oakdale</h3>
                <p>515 Crescent Avenue<br><br>Second Floor<br><br>Portland, Maine<p>
              </div>
      </section>
      <section class="contact">
        <h2>The Tea Cozy<h2>
          <h5>contact@theteacozy.com</h5>
          <h5>917-555-8904<h5>
      </section>
    </main>
    <footer><h6>copyright The Tea Cozy 2017</h6></footer>
  </body>
</html>

html, body {
  background-color: #000;
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  text-align: center;
  opacity: 0.9;
}
/*header*/
header {
  width: 100%;
  height: 3.13rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.04rem solid seashell;
  position: fixed;
  top: 0;
  z-index: 1;
}
nav li {
  display: inline-flex;

}
li a {
  color: seashell;
  text-decoration: underline;
  margin: 0 1rem;
}
header img {
  height: 2.27rem;
  width: auto;
  margin-left: 0.46rem;
  margin-top: 0.68rem;
}
/*main*/
main {
  width: 100%;
  height: auto;
  margin-top: 3.18rem;
  display:flex;
  flex-direction: column;
  align-items: center;
}
h2, h4 {
  margin: 0.68rem 0;
}
/*mission*/
#mission {
  width: 54.54rem;
  height: 31.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/mission-background.jpg");
  background-repeat: no-repeat;
  background-position: 0 0.9rem;
  background-size: cover;
}
.mission-statement{
  background-color: #000;
  width: 54.54rem;
  height: auto;
}
/*featured tea*/
#featured-tea {
  width: 45.45rem;
  height: auto;
  margin-top: 3.18rem;
}
figure{
  display: inline-flex;
  flex-direction: column;
  margin-right: 0.68rem;
  margin-left: 0.40rem;
}
figure img {
  width: 13.62rem;
  height: 9.09rem;
}
figcaption{
  margin-top: 0.46rem;
}
/*locations*/
#locations {
  width: 54.54rem;
  height: 22.72rem;
  margin-top: 3.18rem;
  background-image: url("../images/locations-background.jpg");
  background-repeat: no-repeat;
  background-position: 0 -3.18rem;
  background-size: cover;
}
.address {
  width: 13.62rem;
  height: auto;
  display: inline-flex;
  flex-direction: column ;
  margin-right: 1.8rem;
  background-color: #000;
}
.contact{
  height: 9.09rem;
  width: auto;
}
footer {
  text-align: left;
  margin-left: 0.9rem;
}