Some interior divs lay on top of each other

[ghost]

I have a section which has three interior divs...

    <div id="sitename">
        <div>ottawa</div>
        <div>coop</div>
        <div>network</div>
    </div>

[site is on WordPress and link is : http://ottawacoopnetwork.davidmanning.ca/]

CSS is...

sitename {

display: inline-block;
vertical-align: top;
width: 160px;
height: auto;
padding: 0;
margin: 0.75rem 2rem 0.5rem;
font-family: albertoregular;
font-size: auto;
font-weight: 700;
text-transform: lowercase;
letter-spacing: 2px;
line-height: 2em;

}

jQuery is...

$(document).ready( function() {
    $('#sitename').bigtext();
});

Lettering results are...

Baffled as to what's wrong.

[ghost]

Turned 'divs' into 'spans' and added to CSS...

#sitename span {
display: inline-block;
}

...this solved problem, but shouldn't have to do this.