Non-responsive website - Viewport issue - Page showing zoomed in on mobile

Question

I put together a page using html and css with a header, page content and footer with a width of 1170px (just like boostrap) adding together width+border+padding.

I'm also making use o the meta tag viewport. For this question I'm leaving it as attached bellow.

I was expecting the content (header, content, footer) to fit on the viewport (img 1) on mobiles and it does in some but I noticed that in some devices it's actually showing only part of the content and giving me a horizontal scroll bar (img 2).

I've been searching a lot about viewport but couldn't find a solution about how to make it looks like img 1 on all devices. Please advice.

You can view the live code at ViewPort Test . I'm not gonna change this one. For tests I'll be using the following, development

VIEWPORT

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

CSS

  *{
    margin:0;
    padding:0;
    border:0;
  }
  div.header,
  div.content,
  div.footer{
    width:100%;
  }
  div.header{
    background:blue;
  }
  div.content{
    background:orange;
  }
  div.footer{
    background:purple;
  }
  div.wrapper{
    width:1120px;
    border:10px solid green;
    padding:0 15px 0 15px;
    margin:0 auto;
    background:red;
  }

HTML

<div class="header">
  <div class="wrapper">
      <h1>Header</div>
  </div>
</div>
<div class="content">
  <div class="wrapper">
      <h1>Content</h1>
  </div>
</div>   
<div class="footer">
  <div class="wrapper">
      <h1>Footer</h1>
  </div>
</div>  

Answer 1

If you aren't using media queries and you just want the 1170px wide fixed layout to fill the mobile screen, then change this:

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

to this:

<meta name="viewport" content="width=1170">