Bootstrap + jQuery: Resizing diagram based on screen width

Question

I made a diagram that changes its size based on the screen width (recreated (poorly) in the fiddle ), but when I use this code on my page, the final circle/glyph falls to the following line when I decrease the screen width , when it should stay on the same line (as in the fiddle ).

My fiddle

Here's my code:

html

<div class="glyphicon-belt">

        <div id="rectangle"></div>

        <div class="container circle-container circle-1">
            <i class="icon-steak" style="font-size: 60px"></i>
        </div>

        <div class="container circle-container circle-2">
            <i class="icon-brain" style="font-size: 60px"></i>
        </div>

        <div class="container circle-container circle-3">
            <i class="icon-happy" style="font-size: 60px"></i>
        </div>

</div>

css

.circle-container {
    background-color: #FDA220;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    text-align: center;
    display: inline-block;
    line-height: 100px;
    margin-top: -60px;
}

.glyphicon-belt {
    width: 50%;
    left: 25%;
    position: absolute;
    text-align: center;
  margin-top: 100px;
//  background-color: black;
}

#rectangle {
    width: 80%;
    margin-left: 10%;
    height: 20px;
    background: #E7292A;
}

.circle-1 {
    margin-right: 26%;
}

.circle-2 {
    margin-right: 26%;
}

.circle-3 {
//  margin-right: -5%;
}

.glyph-connect {
//  left-margin: 25%;
    text-align: center;
    padding: 0px;
    background-color: black;
}

jQuery

var screen = $(window).width();
var fontRatio = 60 / screen;
var circleRatio = 100 / screen;
var barRatio = 20 / screen;

$(window).on('resize', function() {
    var screen = $(window).width();
    var fontSize = screen * fontRatio;
    var circleSize = screen * circleRatio;
    var lineHeight = circleSize + "px";
    var barHeight = screen * barRatio

    $(".icon-steak").css("font-size", fontSize);
    $(".icon-brain").css("font-size", fontSize);
    $(".icon-happy").css("font-size", fontSize);

    $(".circle-container").css("width", circleSize);
    $(".circle-container").css("height", circleSize);
    $(".circle-container").css("line-height", lineHeight);

    $("#rectangle").css("height", barHeight);
});

Answer 1

If I understand your question right and playing around with it, it looks like you need to fix the circle-3 :

.circle-3 {
  margin-right: 1%;
}

Not sure why you had it commented out, but that it seems to fix the problem when you uncomment it and play with the %'s.