title: HTML Elements Disappear When Resizing Window
body: <p>I'm a novice coder and I'm building my first proper website. I have a column of button links down the right hand side of my page. However, they're only visible if the window is full-screen. If I use my mouse to shrink the size of the window, the buttons disappear. Is there any way that I can make the buttons stay visible if the window changes size?  </p>
  
  <p>Here's the HTML code:</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>/* Scroll down to the bit that says ALL MY BUTTONS for the relevant CSS. */
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    background-color: #fff;
    color: #555;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
  }
  
  .row {
    max-width: 1140px;
    //margin: 0 auto;
  }
  
  header {
    background-image: url(img/joshua-earle-183442.jpg);
    background: no-repeat center center cover;
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
  
  .hero-text-box {
    position: absolute;
    width: 1140px;
    top: 5%;
    left 50%;
    font-family: 'Orbitron', 'Arial', sans-serif;
    margin-left: 15px;
    word-spacing: 15px;
    font-weight: 300;
  }
  
  h1 {
    margin-top: 0;
    color: #ef872e;
  }
  
  /****ALL MY BUTTONS***/
  
  .quizzes {
    position: absolute;
    display: inline-block;
    margin-left: 1730px;
    margin-bottom: 10px;
    top: 50%;
    text-decoration: none;
    color: #ef872e;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
  }
  
  .calculators {
    position: absolute;
    display: inline-block;
    margin-top: 20px;
    margin-left: 1692px;
    top: 55%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
  }
  
  .solarsystem {
    position: absolute;
    width: 230px;
    display: inline-block;
    margin-top: 40px;
    margin-left: 1612px;
    top: 60%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
  }
  
  .mysteries {
    position: absolute;
    width: 240px;
    display: inline-block;
    margin-top: 60px;
    margin-left: 1602px;
    top: 65%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    padding-right: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
  }
  
  .otherresources {
    position: absolute;
    width: 220px;
    display: inline-block;
    margin-top: 30px;
    margin-left: 1623px;
    top: 75%;
    color: #ef872e;
    text-decoration: none;
    font-family: 'Orbitron';
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: #ef872e;
  }
  
  .full:hover,
  .full:active {
    background-color: #e97512;
    color: #fff;
    transition: background-color 0.3s;
    transition: color 0.3s;
  }
  
  .ghost:hover,
  .ghost:active {
    border-color: #e97512;
    background-color: #e97512;
    color: #fff;
    transition: background-color 0.3s;
    transition: color 0.3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="vendors/css/grid.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="resources/css/style.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css&gt;
    &lt;title&gt;Interactive Galaxy&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;div class="hero-text-box"&gt;
        &lt;h1&gt;Explore the universe, or whatever...&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;a class="quizzes full" href="#"&gt;Quizzes&lt;/a&gt;
      &lt;a class="calculators ghost" href="#"&gt;Calculators&lt;/a&gt;
      &lt;a class="solarsystem ghost" href="#"&gt;The Solar System&lt;/a&gt;
      &lt;a class="mysteries ghost" href="#"&gt;Mysteries of Space&lt;/a&gt;
      &lt;a class="otherresources ghost" href="#"&gt;Other Resources&lt;/a&gt;
    &lt;/header&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>