Q:

divs overlap in smaller screen size

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 margin is not applying an all-around margin to each box in the smaller screen. I tried adding overflow:auto 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)? 
I see that something similar has been asked before, but I'm unsure as how to transfer the answer.

In the view:
<div class="booyah-box col-xs-10 col-xs-offset-1">
  <h2 class="text-center">
    <% scrambled_word_array.each do |character| %>
      <div class="boxed-letter"><%= character %></div>
    <% end %>
  </h2>
</div>

The pertinent CSS:
.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;
}

A:

This helps you
Instead of display: inline use display: inline-block
worked nice for me.

