How to make home widgets appear horizontally

Use CSS3 flexbox to control layout of widgets. First, wrap widget divisions in a container division <div class="widgets-container">. Add a unique class to each widget division ( in our example: widget-1, widget-2, and widget-3 ). Example code:

<div class="widgets-container">

    <div class="widget-1">
        <!-- widget-1 code below -->
        <h2>Widget 1</h2>
    </div>

    <div class="widget-2">
        <!-- widget 2 code below -->
        <h2>Widget 2</h2>
    </div>

    <div class="widget-2">
        <!-- widget 3 code below -->
        <h2>Widget 2</h2>
    </div>

</div>

This is all for HTML part. The rest is pure CSS:

.widgets-container {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.widget-1, .widget-2, widget-3 {
    width: 30%;    
    text-align: center;
    border: solid thin;
}

More info about CSS Flexbox.