How to align 3 boxes in twitter bootstrap horizontally?

[admin]

I need to insert 3 boxes next to each other in wordpress theme. I'm using <strong>wp-bootstrap theme</strong>.

What I did I create a page and I named it "offers", and I wrote the following code

<div class="col-xs-4 text-center offer-box">
    <h1>Offer 1</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 3</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

in css file, I wrote

.offer-box {
    background: #f4e759;
    height: 300px;
    border-radius: 10px;
}

.offer-box h1 {
    color: #080808;
}

.offer-box p {
    color: #080808;
    font-size: 1.2em;
}

It works but the boxes appear without margins. I need to make it with margins left and right for each box.

It should appear like that image exactly<br>
<img src="

https://imgur.com/WiiLZ

" alt="enter image description here">