CSS/Jade/HTML: boxes won't inline properly - css

Question

I have the following Jade template:
extends layout
block content
h2 Characters and Portraits
div(id="portraitsBox")
- var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
for filename in portraits
- var url = "/images/portraits/" + filename.toLowerCase() + ".png"
div(class="characterBox" id=filename)
h3(class="characterName")= filename
img(class="portrait" src= url)
link(rel='stylesheet', href='/stylesheets/characters.css')
Which pulls from the following CSS:
#portraitsBox {
border: 1px solid black;
padding: 10px;
}
.characterBox {
position: relative;
padding: 5px;
border: 1px solid black;
width: 350px;
display: inline;
}
.characterName {
padding-top: 0px;
width: 150px;
font: Arial;
text-align: center;
}
This works fine if I take out display: inline, but every time I try put it back in I get this garbage:
http://www.orderofthemouse.co.uk/characters
And the container div resizes itself to 169.9px wide!!?
What's going on here? I checked with Firebug and it doesn't look like any of the Bootstrap default stylings are over-riding my own CSS (they're called in the extended layout file) or anything like that, and there's nothing in the cascade that should be causing it, to my reckoning. When I look at the generated HTML all the elements are nested as expected, which was my next consideration so it doesn't seem to be anything silly I overlooked...?

Answer 1

Do you want to get this result: http://screencast.com/t/c06yM3cr
I am confused because you said that it works fine if you disable display inline, and when I tried that they were still displaying as block.
If your desired result is what I have in the sceenshot, all you have to do is set the wrapper #portraitsBox to display: flex.