spans inside div running off page

Question

I've seen some posts about this issue, but nothing's working for me right now. I have a div inside of which are many spans. The spans are running off the page. Can anyone help me please wrap the spans to keep them on the page?

HTML:

    <div id="creditsbar">
<span class="title">Writing</span> <span class="name">Bob, Mary</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Editing</span> 
<span class="name">Mary, Bob</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Design</span> 
<span class="name">Bob</span> 
<span class="smallsquare">&#9632;</span> 
<span class="title">Development</span> 
<span class="name">Mary</span> 
<span class="smallsquare">&#9632;</span>
</div>

CSS:

#creditsbar {
    width: 100%;
    background color: lightgray;
    color: #333;
    font-family: "Muli", Helvetica, Arial;
    padding-left: 20%;
    max-height: 10%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding-bottom: 10px;
    max-width: 100%;
    vertical-align: top;
}
    #creditsbar span {
        word-wrap: normal;
        display: inline-block;
    }
    #creditsbar .title {
        text-transform: uppercase;
        font-size: 80%;
        font-weight: 600;
        padding-right: 5px;

    }
    #creditsbar .name {

    }
    #creditsbar .smallsquare {
        padding: 0 10px;
    }

Answer 1

It's because of padding-left: 20%; inside

#creditsbar {
width: 100%;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
}

remove that line and it will work fine

else use box-sizing: border-box; as suggested by @Andy