.container {
    margin: auto;
    max-width: 1280px;
    padding: 1em;
    width: 90%;
}

html,
body {
    height: 100%;
}

.hero {
    height: 100%;
    position: relative;

    .hero-content {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.hero,
.column-hero {
    text-align: center;

    h1 {
        font-size: 5em;
    }

    .tagline {
        color: lighten($body-text-color, 10%);
        font-size: 1.4em;
    }
}

@media (max-width: $mobile-breakpoint) {
    .hero h1,
    .column-hero h1 {
        font-size: 3em;
    }
}

.container {
    margin: 0 auto;
    max-width: 1280px;
    padding: 1em;
    width: 90%;
}

html,
body {
    height: 100%;
}

.hero {
    height: 100%;
    position: relative;

    .hero-content {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.hero,
.column-hero {
    text-align: center;

    h1 {
        font-size: 5em;
    }

    .tagline {
        color: lighten($body-text-color, 10%);
        font-size: 1.4em;
    }
}

@media (max-width: $mobile-breakpoint) {
    .hero h1,
    .column-hero h1 {
        font-size: 3em;
    }
}

Set only left and right margins of container to auto
Set only left and right margins of container to auto
