divs在較小的屏幕尺寸重疊

我正在研究一個功能，其中每個字母應該在它自己的框中，我試圖風格。箱子應該是一個緊挨着另一個或多個行，在兩種情況下它們之間有一定的餘量。它工作正常，直到我將屏幕大小更改爲小（或在移動設備上進行測試），然後底行的字母與上面的行重疊。更改margin不會在較小的屏幕中爲每個框應用全面邊距。我嘗試加入overflow:auto，但沒有看到區別。我怎樣才能讓每個字母框與所需的邊距分開而不重疊（即使元素在屏幕調整大小時需要按兩行間隔）？divs在較小的屏幕尺寸重疊

我看到類似的問題已被要求before，但我不確定如何傳遞答案。

在視圖：

<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>

相關的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; 
}

來源

2016-08-09 gonzalo2000