title: BootStrap Row not aligning
body: <p>I am using Bootstrap 4 Alpha 5 and I have the following HTML:</p>
  
  <pre><code>&lt;div class="home-content"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row flex-items-xs-middle"&gt;
              &lt;div class="col-md-7"&gt;
                  &lt;h1 class="site-title text-xs-center text-md-left"&gt;
                      &lt;span class="name"&gt;I'm Shivam Paw&lt;/span&gt;
                      &lt;span class="title"&gt;I create beautiful and bespoke websites to fit your needs&lt;/span&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="col-md-5"&gt;
                  &lt;img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on <a href="https://stackoverflow.com/questions/23153497/bootstrap-row-class-contains-margin-left-and-margin-right-which-creates-problems">SO</a> but it said you have to put the row class in a container which I have already done.</p>
  
  <p>You can see the site live at <a href="https://www.shivampaw.com" rel="nofollow noreferrer">https://www.shivampaw.com</a></p>
  
  <p><a href="https://i.stack.imgur.com/1y69Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1y69Q.png" alt="Misaligned Row"></a></p>
  
  <p>I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?</p>