title: Why won't my buttons align together?
body: <p>I'm making a program and for some reason my buttons aren't aligning correctly. I tried making a codepen, but whenever I made it, it didn't look the same as mine does on my webpage. I'm hoping its just something little that my eyes missed with the styles, I'm using bootstrap and just want everything to be aligned nicely on one line.</p>
  
  <p>Here's my html:</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-html lang-html prettyprint-override"><code>&lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title pull-left"&gt;Person Summary&lt;/h3&gt;
  
        &lt;div style="float: left;"&gt;
          &lt;button class="btn btn-default btn-margin"&gt;Save&lt;/button&gt;
          &lt;button class="btn btn-default btn-margin"&gt;Edit&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div style="float: right;"&gt;
          &lt;div class="onoffswitch"&gt;
            &lt;input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked&gt;
            &lt;label class="onoffswitch-label" for="myonoffswitch"&gt;
              &lt;span class="onoffswitch-inner"&gt;&lt;/span&gt;
              &lt;span class="onoffswitch-switch"&gt;&lt;/span&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's the css, most of it is for the onoffswitch:</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>.panel-heading {
    background-color: #165284;
  }
  
  .panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 75%;
    padding-top: 8px;
    font-weight:bold;
    color: white;
  }
  
  .onoffswitch {
    position: relative;
    width: 90px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .onoffswitch-checkbox {
    display: none;
  }
  
  .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #000000;
    border-radius: 20px;
  }
  
  .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }
  
  .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .onoffswitch-inner:before {
    content: "Days";
    padding-left: 10px;
    background-color: #84161B;
    color: #FFFFFF;
  }
  
  .onoffswitch-inner:after {
    content: "Hours";
    padding-right: 10px;
    background-color: #84161B;
    color: #FFFFFF;
    text-align: right;
  }
  
  .onoffswitch-switch {
    display: block;
    width: 18px;
    margin: 6px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    border: 2px solid #000000;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }
  
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a picture of what it currently looks like 
  <a href="https://i.stack.imgur.com/gaPaw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gaPaw.png" alt="enter image description here"></a></p>