.box {
  border: 1px solid red;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .box {
    width: 100%;
  }
}

#header {
  width: 100%;
  height: 210px;
  /*padding: 5px;*/
  background: white;
}

#logo {
  width: 100%;
  height: 80px;
  /*padding: 5px;*/
  background: white;
  text-align: center;
}

#mfsnav {
  width: 100%;
  height: 28px;
  /*padding: 5px;*/
  background: white;
}

#topnav {
  text-align: center;
}

#ocean {
  width: 100%;
  height: 774px;
  /*padding: 5px;*/
  background: url("https://david92jackson.neocities.org/images/wave.jpg") no-repeat center;
  background-size: cover;
}

/* Surfing Freddie's Container */
#freddie-top-margin {
  width: 100%;
  /*height: 122px;*/
  height: 15%;
  /*padding: 5px;*/
  background: none;
}

#freddie {
  width: 100%;
  /*height: 510px;*/
  height: 70%;
  /*padding: 5px;*/
  background: none;
  text-align: center;
}

#freddie-bottom-margin {
  width: 100%;
  /*height: 122px;*/
  height: 15%;
  /*padding: 5px;*/
  background: none;
}

/* Get Your Snob On Container */
#paragraph1 {
  width: 100%;
  height: 500px;
  /*padding: 5px;*/
  background: none;
}

#paragraph1-top-margin {
  width: 100%;
  height: 10%;
  /*padding: 5px;*/
  background: none;
}

#paragraph1-middle {
  width: 100%;
  height: 80%;
  /*padding: 5px;*/
  background: none;
}

#paragraph1-left-margin {
  width: 10%;
  height: 100%;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#snob {
  width: 35%;
  height: 100%;
  float: left;
  /*padding: 5px;*/
  background: none;
  text-align: center;
}

#snob-h1 {
  width: 100%;
  height: 20%;
  /*padding: 5px;*/
  background: none;
}

#snob-h3 {
  width: 100%;
  height: 60%;
  /*padding: 5px;*/
  background: none;
}

#snob-button {
  width: 100%;
  height: 20%;
  /*padding: 5px;*/
  background: none;
}

#snobpic {
  width: 45%;
  height: 100%;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#paragraph1-right-margin {
  width: 10%;
  height: 100%;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#paragraph1-bottom-margin {
  width: 100%;
  height: 10%;
  /*padding: 5px;*/
  background: none;
}
      
/* Let Freddie Be Your Guide Container */
#paragraph2 {
  width: 100%;
  height: 500px;
  /*float: left;*/
  /*padding: 5px;*/
  background: none;
}

#guidepic {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#guide {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

/* Becoming Food Aware Container */
#paragraph3 {
  width: 100%;
  height: 500px;
  /*float: left;*/
  /*padding: 5px;*/
  background: none;
}

#aware {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#awarepic {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

/* Building Community Container */
#paragraph4 {
  width: 100%;
  height: 500px;
  /*float: left;*/
  /*padding: 5px;*/
  background: none;
}

#community {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#communitypic {
  width: 50%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

/* Partners Container */
#partners {
  width: 100%;
  height: 500px;
  /*float: left;*/
  /*padding: 5px;*/
  background: none;
}

#partner1 {
  width: 33.33%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#partner2 {
  width: 33.33%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#partner3 {
  width: 33.33%;
  height: 400px;
  float: left;
  /*padding: 5px;*/
  background: none;
}

#footer {
  width: 100%;
  height: 128px;
  /*padding: 40px;*/
  background: lightgray;
}