Navbar overextends its width boundaries

I'm using twitter bootstrap and the "Creative" open-source bootstrap theme to develop a website. It looks fine when viewed on a large screen (Menu not collapsed) but as soon as I simulate a mobile version of the website, the site becomes scrollable to the side by a few pixels and it's really annoying when scrolling down the site. The image below showcases the issue.

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">SITE</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a class="page-scroll" href="#explained">Explained</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#benefits">Benefits</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Buy</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#links">Links</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

I've not customised the navbar myself apart from changing the colours and I've no idea why it keeps overextending the boundaries. I do believe the actual issue is in the navbar itself because nothing else on the site exceeds the max-width in pixels after inspecting every element.