JSFiddle - React, Tailwind, and code Playground

HTML

So the 'goal' is for the 5 blocks to be moved to the right so that they are **together** centered (so block 4 is still below 1).

<div id="container">
    <div id="inner">
        <div class="block">1</div>
        <div class="block">2</div>
         <div class="block">3</div>
         <div class="block">4</div>
         <div class="block">5</div>
         <div class="clear"></div>
    </div>
</div>

CSS

body{
    /*To make sure it shows the same for everybody*/
    /*This width is in reality variable and *not* fixed */
}
#container{
    border:1px solid black;
}
.clear{
    clear:both;
}
.block{
    width:100px;
    height:50px;
    border:1px solid black;
    margin:15px;
    float:left;
}
#inner{
    width:396px; /* (100+15*2+2) * 3 */
    margin:auto;
}