title: Moving Element more to the left without moving the element through resizes
body: <p><br>
  Attempting to resize the browser and i cannot seem to keep the div "stickyslider" within the page when i shrink past the edge of the "green".<br>
  yes i know its the padding, but is there anyway to put the slider in that position without it resizing it until both elements (menu and slider) are the full width
  <br><br>
  <a href="https://i.stack.imgur.com/DaleR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DaleR.jpg" alt="developerSettings"></a>
  <br><br>
  I am new to this so my code is fairly disgusting.</p>
  
  <p>but as you can tell the slider, drops down.</p>
  
  <p>any critique on how i'm doing things is much appreciated.</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>a{
       color: black;
   }
  .menu{
      display: inline-table;
      padding-top: 15%;
      max-width: 150px;
  }
  
  
  .stickyslider{
      padding-top: 15%;
      padding-right: 25%;
      padding-bottom: 15%;
      float: right;
  }</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;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="CSS/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;nav class="menu"&gt;
          &lt;a&gt;&lt;u&gt;name&lt;/u&gt;&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;123 fake street&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;+61 4 00000000&lt;/a&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;a&gt;&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;&lt;/a&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;a&gt;Example1&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example2&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example3&lt;/a&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;a&gt;Example4&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example5&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example6&lt;/a&gt;&lt;br&gt;
  
          &lt;a&gt;Example7&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example8&lt;/a&gt;&lt;br&gt;
          &lt;a&gt;Example9&lt;/a&gt;&lt;br&gt;
      &lt;/nav&gt;
      &lt;div class="stickyslider"&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Indicators --&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
              &lt;div class="item active"&gt;
                  &lt;img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture"&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="more architecture"&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="heaps architecture"&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;img src="http://www.dailymobile.net/wp-content/uploads/wallpapers/android-640x480-wallpapers/android-640x480-wallpaper-4582.jpg" alt="architecture"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Left and right controls --&gt;
  
          &lt;a class="left carousel-control" href="#myCarousel" role="button" 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="#myCarousel" role="button" 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&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>