How to extend viewport to the full screen width?

Question

I have a .body element on my page http://crimeansurfers.tumblr.com which has a border frame that should touch the edges of the screen.

body {
    font-family: 'Arquitecta', sans-serif;
    font-size: 13px;
    color: ;
    border: #00f 10px solid;
    background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}

It shows up fine on desktop (the frame touches the edges of the screen, however, when I open it on a mobile, it shows like this:

As you can see, the right frame is not touching the edge of the screen, but it's supposed to.

I'm using also viewport to resize display for mobile devices with the following parameters:

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

What do I need to change in order for it to work as I intended it to?

Thank you!

UPD maybe it makes sense to render the frame using some other method rather than body CSS tag?

Answer 1

There is an overflow being caused by the ul element within the #thumbs div. You can fix this by adding a media query to the bottom of your style sheet.

<style>
@media (max-width: 414px) {
  #thumbs ul {
    padding-left: 0;
  }
}
</style>

In this case I've set a max width of the media query to 414px as the problem only shows on screen sizes smaller than iPhone 6+.