title: html/css window resize issue
body: <p>So im fairly new to HTML and CSS and coding in general(C# and C++) and ive been working on a website just for fun. I've mostly learned as i've gone along and im proud of what I have so far even though it isnt much. But I have a problem where whenever I open the site on my laptop which has a smaller screen than my PC or whenever I resize the browser the whole page messes up and text is on top of each other and the background image is smaller with white space all around. I've searched a lot and it seems like everyone has a unique fix for it and none have worked for me. Here is my code:</p>
  
  <p>HTML:
  </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Trendy&lt;/title&gt;
          &lt;link rel="icon" type="image/png" href="Images/TitleIcon.png" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="StyleSheet.css" /&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
  
          &lt;h1 class="index-h1"&gt;Trendy&lt;/h1&gt;
  
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SIGN UP&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;LOG IN&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  
  
  <p>CSS:
  </p>
  
  <pre class="lang-css prettyprint-override"><code>html {
      margin: 0;
      padding: 0;
      width: 100%;
  }
  
  body {
      margin: 0;
      padding: 0;
      width: auto;
      height: auto;
      background: url(Images/BFG.png);
      background-position: top;
      background-repeat: no-repeat;
      display: block;
  }
  
  .index-h1 {
      color: #fff;
      font-family: "Broadway Flat";
      font-size: 100px;
      position: absolute;
      left: 70px;
      top: -30px;
  }
  
  .container {
      width: 80%;
      margin: 0 auto;
  }
  
  nav {
      position: absolute;
      left: 60%;
      top: 5%;
  }
  
  nav ul {
      list-style: none;
  }
  
  nav ul li {
      list-style: none;
      display: inline-block;
      color: #fff;
      font-family: "Broadway Flat";
      font-size: 30px;
      padding: 10px 50px;
  
      position: relative;
  }
  
  nav a {
      color: #fff;
      text-decoration: none;
  }
  
  nav a:hover {
      color: #e02626;
  }
  
  nav a::before {
      content: '';
      display: block;
      height: 5px;
      width: 100%;
      background-color: #e02626;
  
      position: relative;
      top: 0;
      width: 0%;
  
      transition: all ease-in-out 150ms;
  }
  
  nav a:hover::before {
      width: 100%;
  }
  </code></pre>