The best way to lay out boxes on a page

You could really reduce the repetitiveness of your code by using classes or targeting the actual divs instead of relying on ids.

 <div id="one" class="box">first</div>
<div id="two" class="box">second</div>
<div id="three" class="box">second</div>
<div id="four" class="box">second</div>
<div id="five" class="box">second</div>
<div id="six" class="box">second</div>
<div id="seven" class="box">second</div>

.box {
    float:left;
    width:200px;
    height: 400px;
    border:3px solid;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 24px;
}

#one{
    border-color: green;
}

#two,#five, #six {
    border-color: red;
}

#three,#four,#seven{
     border-color: blue;
}

If you inspect the divs for the fitness site, you'll see they are using bootstrap, So What I would do is to look at their structure and code. Use Bootstrap if you want and apply the "class="col-md-3 col-sm-6 col-xs-12 shoutout-normal" just as they have it on their page. If not I'd go inline block and use percents on the width to make them line up like in the site.

Theres nothing wrong with looking at their approach to solving an issue. Inspect on the site and take a look.

Thanks for all your advice