Mobile content witdh(body) = media width, but user can still scroll

Question

I overlooked all the web ( i guess) and tried to find the solution for this task: I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked if there are no divs with width more than 320px. Website I'm talking about is http://vasiliib.p.ht/leverage/

I tought this is cause my page content and created a separate page http://vasiliib.p.ht/leverage/mobile.html. Here I inserted simple html code. And, there is the same problem..

I am frustrated .. Please clean my eyes..and show me my mistake, please..

looking forward for your reply. regards.

Answer 1

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

This is the correct answer. It works perfectly.

Answer 2

body{
 margin:0px;
}

should read:

body{
 margin:0 auto;
}

Where are you handling you're responsive design stuff?

Also this:

.bg-course-content-02 {
    background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-02.png");
    margin-left: -970px;
    width: 923px;
    height: 555px;
}

This:

.bg-course-content-04 {
    background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-04.png");
    margin-left: -970px;
    width: 923px;
    height: 555px;
}

and this:

.bg-course-content-06 {
    background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-06.png");
    margin-left: -970px;
    width: 923px;
    height: 555px;
}

check your widths..

Answer 3

Have you included the meta tag inside the head tag of the HTML?

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

that meta tag set the width of the page to the width of your device.