No space between buttons 'on next the line'

No space between buttons 'on next the line'

I trying to create buttons with round corner to simulate menus tabs. If
the screen is not wide enough, I want the buttons to go to the next line.
My issue is that there is no spacing between the buttons on the first line
and those on the following lines:

I am trying to replicate this issue in JSFiddle, but it does not happen
there:

My HTML is:
<div>
<span class="menuButton">Button I Button I Button I</span>
<span class="menuButton">Button II Button II Button II</span>
<span class="menuButton">Button III Button III Button III</span>
</div>
My CSS is:
.menuButton {
color: #FFFFFD;
background: #010109;
margin: 3px 0px 3px 0px;
padding: 1px 6px 0px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-family: 'Istok Web', sans-serif;
font-size: 14px;
white-space: nowrap;
}
Why am having this issue in my page and not JSFiddle? I have posted the
(work in progress) page here. Shrink the window to 320px wide to replicate
the issue.