Site layout breaks on mobile view

Question

I've been writing a layout framework for building my own sites and everything has been going fantastic until a hit a slight bug today. Everything was fitting to the screen except one item that just wouldn't fix itself. I realised the issue there was that I forgot to add the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Once this was added the first issue fixed itself but another has arose. As you can see by the screenshots below:

Ignoring my ugly mug, the issue is the white space that appears on the right hand side of the screen. It seems as if something has set the width to NOT be the device's actual width. Before adding the viewport meta tag that white space wasn't there but without the tag I have a few other issues.

The media queries i've been using are:

@media (min-width 768px)
@media (min-width 992px)
@media (min-width 1200px)

All other code can be found Github

EDIT: Here is a live version of the site Proxi-corp

Answer 1

Remove this rule

.banner-items {
    /* left: 50px; */
}

Answer 2

Remove/rethink .banner-items{ left:50px;}