来自foreach循环的结果不会滚动但会中断

I have a page that displays a train (Css made), and it needs to position the axles.

What i have when the axles don't have a margin:

And this is what it looks when i add margin. (The style is a SUM. so the total gets calculated to %. )

As you can see the circles (axles) are going down. i don't want this. I want the circles to go to the right. Like this:

So if the circles are going to far to the left. wich is the case in picture 2. i want the border to have a scrollbar. Now i have this but it does not work. Code:

EDIT: Made a snippet and deleted the other code

#axle_bogie_border {
    border-radius: 0px 0px 20px 20px;
    background: lightgray;
    border: 2px solid black;
    width: 100%;
    height: 400px;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
}

#length_info {
    border: 2px solid black;
    border-bottom: none;
    background: green;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    width: 100%;
}

#show_length{
    border-bottom: 2px solid red;
    width: 100%;
}

#show_length2{
    border-bottom: 2px solid red;
    width: 10%;
}

#train {
    margin-top: 2%;
    border-radius: 20px;
    height:200px;
    background:black;
    vertical-align: middle;
    margin-left: 10%;
}

#train h2 {
    color: white;
    text-align: center;
}

#axles { 
    margin-left: 10%;
    position: relative;
    height: 50px;
}

#axle {
    float: left;
    text-align: center;
}

#circle {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: black;
}

<div id="length_info">
    <div id="show_length">25m</div>
    <div id="show_length2">2.5m</div>
</div>
<div id="axle_bogie_border">
    <div id="train" style="width:48%;">
        <h2>Train</h2>
    </div>
    <div id="axles">
        <div id="axle" style="margin-left: 20%">
            <div id="circle">1</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
        <div id="axle" style="margin-left: 20%">
            <div id="circle">2</div>
        </div>
    </div>
</div>

Also made a fiddle: http://jsfiddle.net/3b63f4o1/

</div>