title: Using a wrapper to prevent elements from moving around?
body: <p>I'm very new to HTML/CSS, and am working on a website for my band. The problem I'm running into is that when I resize the window, the text gets jumbled up and the logo shrinks. I've already researched this problem, but haven't had any luck so far. The common solution seems to be to apply a wrapper class to the entire body of the text, specifying a min-width, but that hasn't worked. </p>
  
  <p>I'd just like all of the content of the page to stay where it is when the browser window is resized.   Here is my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: black;
  }
  
  .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
  }
  
  .banner {
    position: absolute;
    top: 20px;
    margin-left: 40px;
  }
  
  .navbar {
    color: skyblue;
    font-size: 17px;
    font-family: "Courier New";
    font-weight: lighter;
    position: absolute;
    top: 350px;
  }
  
  .navbarlinks {
    text-decoration: none;
    color: skyblue;
  }
  
  a.navbarlinks:hover {
    color: azure;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;div class="wrapper"&gt;
  
      &lt;div class="banner"&gt;
        &lt;img src="https://i.imgur.com/8d3CGHC.jpg" height=80% width=80%&gt;
      &lt;/div&gt;
  
  
  
      &lt;nav&gt;
        &lt;h1 class="navbar"&gt;
          &lt;a class="navbarlinks" href="shows.html"&gt;S h o w s&lt;/a&gt; |
  
          &lt;a class="navbarlinks" href="listen.html"&gt;L i s t e 
                  n&lt;/a&gt; |
  
          &lt;a class="navbarlinks" href="watch.html"&gt;W a t c h&lt;/a&gt; |
  
          &lt;a class="navbarlinks" href="dance.html"&gt;D a n c e&lt;/a&gt; | &lt;a class="navbarlinks" href="dance.html"&gt;C o n t a c 
                  t&lt;/a&gt;
        &lt;/h1&gt;
  
      &lt;/nav&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's what the page looks like fullscreen:</p>
  
  <p>(<a href="https://i.imgur.com/NuwgLnz.png" rel="nofollow noreferrer">https://i.imgur.com/NuwgLnz.png</a>)</p>
  
  <p>And then when I make the browser window narrower:</p>
  
  <p>(<a href="https://i.imgur.com/S1EZFHy.png" rel="nofollow noreferrer">https://i.imgur.com/S1EZFHy.png</a>)</p>
  
  <p>Any tips are much appreciated, this has been driving me nuts. Thanks!</p>