CSS/Jade/HTML: Boxen nicht richtig Inline

Question

Ich habe folgende Jade Vorlage:

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

die aus der folgenden CSS zieht:

#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; 
} 

Dies funktioniert gut, wenn ich heraus nehmen display: inline, aber jedes Mal, wenn ich es versuchen, diesen Müll in mir setze:

http://www.orderofthemouse.co.uk/characters

Und der Behälter div passt sich an 169.9px breit an !!?

Was geht hier vor? Ich habe es mit Firebug überprüft und es sieht nicht so aus, als ob irgendwelche Bootstrap-Standard-Stylings mein eigenes CSS überstürzen (sie heißen in der erweiterten Layout-Datei) oder irgendetwas ähnliches, und nichts in der Kaskade sollte das verursachen es, zu meiner Rechnung. Wenn ich mir das generierte HTML anschaue, sind alle Elemente wie erwartet verschachtelt, was meine nächste Überlegung war, also scheint es nichts Albernes zu sein, das ich übersehen habe ...?

Answer 1

Haben Sie dieses Ergebnis erhalten möchten: http://screencast.com/t/c06yM3cr

Ich bin verwirrt, weil Sie sagte, dass es gut funktioniert, wenn Sie Anzeige inline deaktivieren, und als ich versuchte, dass sie nach wie vor als Block Anzeigen wurden.

Wenn Ihr gewünschtes Ergebnis das ist, was ich im sceenshot habe, müssen Sie nur den Wrapper #portraitsBox einstellen: flex.