title: Want Div shifted to the right,
body: <p>I want my btn class to be shifted right. I have two button classes eg. btn-full, btn-ghost, I want to shift both of them to the right, if I float it to right then their position changes, I don't know why.</p>
  
  <pre><code>&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:400,100,300,300italic' rel='stylesheet' type='text/css'&gt;
      &lt;title&gt;Musica&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="hero-text-box"&gt;
              &lt;h1&gt;Life is the Song.&lt;br&gt; Love is the Music.&lt;/h1&gt;
              &lt;a class= "btn btn-full" href="#"&gt;Listen &lt;/a&gt;
              &lt;a class="btn btn-ghost" href="#"&gt;Show me more&lt;/a&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  html{
      background-color: #fff;
      color: #555;
      font-family: 'Lato','Arial',sans-serif;
      font-weight: 300px;
      font-size: 20px;
      text-rendering: optimizeLegibility;
  }
  .row{
      max-width: 1140px;
      margin: 0 auto;
  }
  
  header{
      background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
      background-size: cover;
      background-position: center;
      height: 100vh;
  }
  
  .hero-text-box{
      position: absolute;
      width: 1140px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  h1{
      float: right;
      margin: 0;
      margin-bottom: 20px;
      color: #fff;
      font-size: 240%;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 1px;
      word-spacing: 4px;
  }
  
  .btn:link,
  .btn:visited{
      display: inline-block;
      padding: 10px 30px;
      font-weight: 300;
      text-decoration: none;
      border-radius: 200px;
      color: #fff;
      transition: background-color 0.2s, border 0.2s, color 0.2s;
      margin-top: 150px;
  }
  
  .btn-full:link,
  .btn-full:visited{
      background-color: #2ecc71;
      border: 1px solid #2ecc71;
      color: #fff;
      margin-right: 15px;
  }
  
  .btn-ghost:link,
  .btn-ghost:visited{
      border: 1px solid #2ecc71;
      color: #2ecc71;
  }
  
  .btn:hover,
  .btn:active{
      background-color: #1e874b;
  }
  
  .btn-full:hover,
  .btn-full:active{
      border: 1px solid #1e874b;
  }
  
  .btn-ghost:hover,
  .btn-ghost:active{
      border: 1px solid #1e874b;
      color: #fff;
  }
  </code></pre>
  
  <p>I tried everything like  float:right, the position:absolute; ;left:-5oo; but it doesnot work. Please help </p>