title: site doesn't scale properly
body: <p>When I scale my site down or view on mobile/tablet, there is all of this margin/whitespace on right side and it cuts off text content in #main section. Why is this happening and how can I make it all scale correctly? I have tried overflow hidden on various parts which didn't solve anything and I have tried zeroing out margins and messing with padding. I'm unsure how to make it scale correctly and get rid of that extra margin/space on the right. There isnt much yet, only header, nav and #main section. 
  Thank you for your help in advance</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;    
  &lt;header id="main-header"&gt;
      &lt;div class="container"&gt;
          &lt;h1 class="display-4"&gt;.Richardson&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  
      &lt;nav id="navbar"&gt;
          &lt;div class="container"&gt;
              &lt;ul class="my-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
  
  &lt;section id="main"&gt;
      &lt;div class="container"&gt;
         &lt;div class="col-md-8" id="welcome-text"&gt;
  
          &lt;h1 class="display-4"&gt;Welcome&lt;/h1&gt;
          &lt;hr class="rule"&gt;
          &lt;p&gt;&lt;cite&gt;"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn&lt;/cite&gt;&lt;/p&gt;
                  &lt;p&gt;Hey, I'm &lt;span style="font-size: 24px; color: #FFFC31"&gt;&lt;strong&gt;Name!&lt;/strong&gt;&lt;/span&gt; Congratulations on joining me in my path to becoming a highly valued, self-taught &lt;span style="font-size: 24px; color:#FFFC31"&gt;&lt;strong&gt;Front-End Web Developer&lt;/strong&gt;&lt;/span&gt;. My journey began with &lt;span style="font-size: 24px; color: #FFFC31"&gt;&lt;strong&gt;Free Code Camp&lt;/strong&gt;&lt;/span&gt; and the &lt;span style="font-size: 24px; color: #FFFC31"&gt;&lt;strong&gt;Code Academy,&lt;/strong&gt;&lt;/span&gt; as well as many youtube tutorials. I've learned &lt;span style="font-size: 24px; color: #FFFC31"&gt;&lt;strong&gt;HTML, CSS and Javascript&lt;/strong&gt;&lt;/span&gt; basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. &lt;span style="font-size: 24px; color: #FFFC31"&gt;&lt;strong&gt;I'm passionate&lt;/strong&gt;&lt;/span&gt; about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt; 
  
     &lt;section&gt;
         &lt;h1&gt;Portfolio&lt;/h1&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?&lt;/p&gt;
  
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?&lt;/p&gt;
  
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?&lt;/p&gt;
     &lt;/section&gt;
  
  css:
      * {
      margin: 0;
      padding: 0;
  }
  
  .container {
      width: 80%;
      margin:auto;
      overflow: hidden;
  }
  
  img {
      min-width: 100%;
      margin: 0;
  }
  
  h1,h2,h3,h4,h5,h6 {
      font-family: "Helvetica", "geneva", sans-serif;
  }
  
  p {
      font-family: sans-serif;
      font-size: 1.3rem;
      line-height: 2.5rem;
  }
  
  a {
      color: #4e0250;
  }
  
  a:hover {
  
      text-decoration: none;
      background-color: gray;
      padding: 10px;
      color: #D3D3D3;
      border-radius: 20px;
  }
  
  #main-header {
      background: #4E0250;
      color: silver;
      text-align: center;
      position: sticky;
      top: 0;
      right: 0;
      z-index: 1;
  }
  
  #navbar {
      text-align: center;
      background-color: #D3D3D3;
      color: #4e0250;
      font-size: 1.4rem;
      z-index: 1;
  }
  
  #navbar ul {
      padding-left: 65px;
  }
  
  #navbar ul li {
      text-align: center;
      list-style: none;
      padding-right: 40px;
      display: inline;
  }
  
  #navbar {
      position: fixed;
      width: 100%;
  }
  
  #navbar .my-nav {
      margin: 15px;
  }
  
  #main {
      padding-top: 5rem;
      background: url('../img/headon3.jpg') center center no-repeat;
      background-size: cover;
      min-height: 757px; 
      overflow: hidden;
  }
  
  #main .container {
      margin-top: 55px;
      margin-left: 150px;
  
  }
  
  #main #welcome-text {
      background-color: rgba(92, 92, 92, 0.9);
      color: #D3D3D3;
      padding: 0 20px;
      border-radius: 10%;
      padding-bottom: 5px;
      min-width: 40%;
  }
  
  #main h1 {
      padding-top: 20px;
  }
  
  .rule {
      border-top: 1px solid floralwhite;
      padding-bottom: 10px;
  }
  </code></pre>