How do I align columns in the center of the page?

Viewed 12669

How do I align the columns so that they go in the center of the page? The columns are aligning to the left but I need them to be centered in the middle of the page Im using CSS3, HTML5 and bootstrap v3.3.4

<section id="about-us" class="about-us">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-3">
                <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="900ms">
                    <h2>one</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3">
                    <div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
                        <h1>One</h1>
                        <h1>Two</h1>
                        <h1>Three</h1>
                        <h1>Four</h1>
                        <h1>Five</h1>
                        <h1>Six</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.about-us {
    background-image:linear-gradient(rgba(18, 172, 234, 0.42),     rgba(0, 191, 255, 0.55)),url(background-about-header.png);
    background-size: cover;
    background-attachment: scroll;
    color: #fff;
    position: relative;
    background-position: center;
    overflow: hidden;
    height: 100vh;
}

#about-us h1 {
    font-size: 400%;
    font-weight: 400;
    text-transform: none;
    color: #666;
    text-align: justify;
    margin: auto;
}


.about-us h2 {
    font-size: 750%;
    font-weight: 400;
    text-transform: uppercase;
    color: #666;
    line-height: 80px;
    padding-top: 120px;
    margin: auto;
}

#about-us .block {
    position: relative;
    padding: 310px 0px 0px;
    text-align: center;
    margin: auto;
}
1 Answers
Related