How do you center 3 divs in a row?

I'm having trouble getting my 3 divs to center. They appear to be almost centered but there's still more white space on the right side than there is on the left. I'm including my html and css along with a link to the site.

http://alexrdzv2.herokuapp.com/index.html

Also, when I make the window larger, it gets even worse.

I should mention that the container it's wrapped in only has the following properties - width: 80%, margin: auto, and overflow: hidden. I have all the sections in my page wrapped inside this container but I know it's not the problem since I've tried doing it without it and the boxes still won't properly center.

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}

<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

Solution

You can use flexbox CSS3 feature for center your boxes, for this you need to add below CSS in your container class.

.container {
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    justify-content: center;
}

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}

<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>