title: div going outside container when I add padding
body: <p>my right side button is pushing outside of its container when I add padding to it. How do I fix this?
  Note that I'm also using bootstrap, please check codepen.</p>
  
  <p><a href="https://codepen.io/mattmcgilton/pen/rNarKgR" rel="nofollow noreferrer">https://codepen.io/mattmcgilton/pen/rNarKgR</a></p>
  
  <pre><code>&lt;div class="head"&gt;
      &lt;nav class="container-fluid test-one"&gt;
          &lt;div class="row parent"&gt;
              &lt;div class="col logo"&gt; 
                  &lt;span class="nav-left-text"&gt;west end&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="col logo"&gt; 
                  &lt;a href="" class="register-btn"&gt;register&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>    padding: 10px;
      margin-top: 10px;
  }
  
  .nav-left-text {
      color: white;
      text-transform: uppercase;
      font-size: 1.563em;
      letter-spacing: 3px;
  }
  
  .logo {
      text-align: center;
  }
  
  .register-btn {
      color: white;
      text-transform: uppercase;
      font-weight: 300;
      font-size: 0.813em;
      letter-spacing: 2px;
      border: solid white 1px;
      padding: 12px 20px;
  }
  
  
  </code></pre>