title: How to prevent a button from moving when resizing the window
body: <p>I can use some help as I am new to html coding. anyway,
  I've made a carousel with bootstrap. The carousel itself works fine. But after placing a button in the carousel, (using top: (px) and right: (px) as I don't know how to place it where I want otherwise)it still works fine. Until I start resizing the window. The background becomes smaller, but the button kind of stays the same size. So it starts moving around and what once were 2 buttons next to eachother, are now 2 buttons with alot of space between them. Here, have a look at my code:
  HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width = device-width, initial-scale = 1"&gt;
          &lt;title&gt;Galaxy&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
          &lt;style type="text/css"&gt;
  &lt;/style&gt;
      &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="theCarousel" class="carousel slide" data-ride="carousel"&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#theCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#theCarousel" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;img src="galaxy3.jpg"&gt; 
                          &lt;div class="slide1"&gt;&lt;/div&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;div class="bannertext"&gt;
                                  &lt;h1&gt;Santorodesign&lt;/h1&gt;
                                  &lt;p&gt;A website made by Michael&lt;/p&gt;
                                  &lt;div class="mobileHide"&gt; &lt;button id="headerbutton-nederlands"&gt;Nederlands&lt;/button&gt;&lt;/div&gt;
                                  &lt;div class="mobileHide"&gt; &lt;button id="headerbutton-english"&gt;English&lt;/button&gt;&lt;/div&gt;
                              &lt;/div&gt;                              
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="slide2"&gt;&lt;/div&gt;
                      &lt;img src="galaxy2.jpg"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;div class="bannertext2"&gt;
                              &lt;h1&gt;Explore the galaxy&lt;h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;          
              &lt;/div&gt;
  
                  &lt;a class="left carousel-control" href="#theCarousel" data-slide="prev"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                  &lt;/a&gt;
  
                  &lt;a class="right carousel-control" href="#theCarousel" data-slide="next"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt; 
                  &lt;/a&gt;            
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="firstrow"&gt;
              &lt;div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;img id="mercury" src="mercury.png"&gt; &lt;br&gt;
                  (text) &lt;br&gt;
                  &lt;a href="#"&gt;&lt;button type="submit" class="btn-primary btn-lg"&gt;Learn more about Mercury&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;img id="earth" src="earth.png"&gt; &lt;br&gt;
                  (text)&lt;br&gt;
                  &lt;a href="#"&gt;&lt;button type="submit" class="btn-primary btn-lg"&gt;Learn more about the Earth&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12"&gt;
                  &lt;img id="venus" src="venus.png"&gt; &lt;br&gt;
                  (text) &lt;br&gt;
                  &lt;a href="#"&gt;&lt;button type="submit" class="btn-primary btn-lg"&gt;Learn more about Venus&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;          
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.carousel-control.left, .carousel-control.right {
      background-image: none
  }
  #firstrow {
     font-size: 2em;
     padding: 100px 0 0 0;
     width: 100%;
     height: 550px;
     text-align: center;
     color: black;
     background: #DCDCDC;
     position: relative;
  }
  @media all and (max-width: 900px) {
      #headerbutton-nederlands { display: none; }
      #headerbutton-english { display: none; }
  }
  .planet {
      margin-bottom: 30px;
      position: relative;
  }
      .planet img {
          height: 300px;
          max-width: none;
      }
  
      .bannertext {
          font-size: 1.3em;
          line-height: 15px;
      }
      .bannertext h1 {
          font-size: 2em;
      }
      .bannertext2 {
          font-size: 2em;
      }
   .mobileShow { display: none;}
   .mobileHide { display: inline;}
       /* Smartphone Portrait and Landscape */
      @media only screen
          and (max-device-width : 480px){
          .mobileShow { display: inline;}
          .mobileHide { display: none;}
          .planet img{
              height: 200px;
          }
          }
  #headerbutton-nederlands {
      position: absolute;
      font-weight: bold;
      bottom: 35px;
      right: -90px;
      -webkit-border-radius: 5px;
      line-height: 50px;
      color: white;
      background-color: #778899;
      width: 13%;
      text-align: center;  
      border: white 2px solid ;    
  }
  #headerbutton-english {
      position: absolute;
      font-weight: bold;
      bottom: 35px;
      right: 100px;
      -webkit-border-radius: 5px;
      line-height: 50px;
      color: white;
      background-color: #778899;
      width: 13%;
      text-align: center;  
      border: white 2px solid ;
  }
  </code></pre>
  
  <p>basically what I want is that the buttons + the text inside of the buttons also resize when the window becomes smaller. As if the buttons are a part of the image. </p>
  
  <p>Thank you for your time. 
  -Michael</p>