Website completely off center

I attached a screenshot that was zoomed out so I can fit in the whole website as you can see it is completely off center.

We can make an adjustment by wrapping everything below the header into one large div and

giving it a margin 0 auto; In the code below I called it main.

<div class="main">
 <!-- Mision -->
    <div class="mission">
      <h2>Our Mission</h2>
      <h4>Handpicked, Artisanally Curated, Free Range, Sustainable,
         Small Batch, Fair Trade, Organic Tea</h4>
    </div>
    <!-- Featured Products -->
    <div class="featuredtea">
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
      <div class="products">
        <div class="product">
          <img  src="./resources/images/img-berryblitz.jpg"
           alt="Fall Berry Blitz Tea" />
           <p class="label">Fall Berry Blitz Tea</p>
        </div>
        <div class="product">
          <img  src="./resources/images/img-spiced-rum.jpg"
           alt="Spiced Rum Tea" />
           <p class="label">Spiced Rum Tea</p>
        </div>
        <div class="product">
          <img  src="./resources/images/img-donut.jpg"
           alt="Seasonal Donuts" />
           <p class="label">Seasonal Donuts</p>
        </div>
        <div class="product">
          <img  src="./resources/images/img-myrtle-ave.jpg"
           alt="Myrtle Ave tea" />
           <p class="label">Myrtle Ave tea</p>
        </div>
        <div class="product">
          <img  src="./resources/images/img-bedford-bizarre.jpg"
           alt="Bedford Bizarre Tea" />
           <p class="label">Bedford Bizarre Tea</p>
        </div>
      </div>
    </div>
    <!-- Locations -->
    <div class="locations">
      <h2>Locations</h2>
      <div class="location">
        <h3>Downtown</h3>
        <p>384 West 4th St</p>
        <p>Suite 108</p>
        <p>Portland, Maine</p>
      </div>
      <div class="location">
        <h3>East Bayside</h3>
        <p>3433 Phisherman's Avenue</p>
        <p>(Northwest Corner)</p>
        <p>Portland, Maine</p>
      </div>
      <div class="location">
        <h3>Oakdale</h3>
        <p>515 Crescent Avenue</p>
        <p>Second Floor</p>
        <p>Portland, Maine</p>
      </div>
    </div>
    <!-- Footer -->
    <div class="footer">
      <h2>The Tea Cozy</h2>
      <h5 class="contact">contact@theteacozy.com</h5>
      <h5>917-555-8904</h5>
    </div>
</div>

css that is added

.main {
margin: 0 auto;
}

ok this is the picture as I saw your website.

tea_cozy

This is after my suggestion, unfortunately there is a still a lot of problems. There needs to be a lot of rewriting on this.

after

amitkb3 / prj-rev-bwfs-tea-cozy

Website completely off center #1