Parallax background image Not Centered

Hi I have been trying to find a fix for this for quite a while now with no luck. Basically the background parallax image is not and wont become centered no matter what I do, See Here! The size of the background image is 2000px by 1333px and looks like this. This is the way my HTML is set up:

<section id="featurette" data-type="background" data-speed="5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <h2>Watch the Course Introduction</h2>
                    </div>
                </div>
            </div>
</section>

And my CSS stylesheet:

#featurette {
    background: url('../img/stuff-bg.jpg') center center repeat fixed;
    background-size: cover;
    color: white;
}

If anyone knows why it isnt working then I would greatly appreciate it if you could help me out.