title: Horizontal alignments getting messed when trying to add bootstrap cards horizontally
body: <p>My horizontal alignments gets messed when when I try to stack 2 bootstrap cards in a row. The problem is I get the horizontal scroller enabled the very moment I try to add these cards.
  Can anyone suggest me a solution please</p>
  <p>Code adapted from bootstrap documentation is as below</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
          &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-sm-6&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;h5 class=&quot;card-title&quot;&gt;Special title treatment&lt;/h5&gt;
          &lt;p class=&quot;card-text&quot;&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
          &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>