title: divs overlap in smaller screen size
body: <p>I'm working on an feature where each letter should be in its own box, which I'm trying to style. Boxes should be one next to the other or in multiple rows, with a margin between them in either case. It works fine, until I change the screen size to a small (or test it on mobile), and then the letters from the bottom row overlap those of the above row. Changing the <code>margin</code> is not applying an all-around margin to each box in the smaller screen. I tried adding <code>overflow:auto</code> but didn't see a difference. How can I have each letter box separated with the desired margin without overlapping (even if elements need to be spaced in two rows upon screen resize)? </p>
  
  <p>I see that something similar has been asked <a href="https://stackoverflow.com/questions/6737424/when-window-size-is-smaller-elements-overlap-eachother">before</a>, but I'm unsure as how to transfer the answer.</p>
  
  <p><a href="https://i.stack.imgur.com/Zx35O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zx35O.png" alt="intended effect"></a>
  <a href="https://i.stack.imgur.com/A4tKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A4tKe.png" alt="bug"></a></p>
  
  <p>In the view:</p>
  
  <pre><code>&lt;div class="booyah-box col-xs-10 col-xs-offset-1"&gt;
    &lt;h2 class="text-center"&gt;
      &lt;% scrambled_word_array.each do |character| %&gt;
        &lt;div class="boxed-letter"&gt;&lt;%= character %&gt;&lt;/div&gt;
      &lt;% end %&gt;
    &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The pertinent CSS:</p>
  
  <pre><code>.booyah-box {
    -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
    -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
    box-shadow: 1px 1px 2px 0 #d0d0d0;
    background: #fff;
    border: 1px solid #ccc;
    border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
    padding: 10px;
    font-family: "Lucida Grande", sans-serif;
  }
  
  .booyah-box .boxed-letter {
    display: inline;
    padding: 8px;
    margin: 2px;
    border: 1px solid black;
    border-radius: 5px;
    background: grey;
    font-family: "Courier New", Courier, monospace;
    color: white;
  }
  </code></pre>