Problems with width, responsive mobile design

Question

I'm having issues with the repsonsive design on this website i'm currently working on. When i visit the site on my phone the width is smaller than all the divs so texts and such goes outside of the phone width. Hard to explain, but if you have a look you'll see what i'm talking about.

Here's the link if you want to see how it looks on a mobile phone. http://royalq.site88.net/

If you find any other errors or problems in my code, feel free to point it out. Thanks in advance :)

html, body { margin: 0; padding: 0; }

@font-face {
    font-family: 'drugsregular';
    src: url('font1/drugs-webfont.eot');
    src: url('font1/drugs-webfont.eot?#iefix') format('embedded-opentype'),
         url('font1/drugs-webfont.woff2') format('woff2'),
         url('font1/drugs-webfont.woff') format('woff'),
         url('font1/drugs-webfont.ttf') format('truetype'),
         url('font1/drugs-webfont.svg#drugsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'coneria_script_demoregular';
    src: url('font2/demo_coneriascript-webfont.eot');
    src: url('font2/demo_coneriascript-webfont.eot?#iefix') format('embedded-opentype'),
         url('font2/demo_coneriascript-webfont.woff2') format('woff2'),
         url('font2/demo_coneriascript-webfont.woff') format('woff'),
         url('font2/demo_coneriascript-webfont.ttf') format('truetype'),
         url('font2/demo_coneriascript-webfont.svg#coneria_script_demoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
a {
    text-decoration: none;
    color: white;
}
p {
    font-family: 'drugsregular';
    font-size: 16px;
    text-align: justify;
    color: #E6E6E6;
}
h1 {
    font-family: 'coneria_script_demoregular';
    font-size: 26px;
    text-align: center;
    color: white;
}
h2 {
    font-family: 'drugsregular';
    font-size: 16px;
    color: white;
    padding-top: 0px;
    padding-left: 15px;
    height: 32px;
}
h3 {
    font-family: 'coneria_script_demoregular';
    font-size: 20px;
    text-align: center;
}
h4 {
    font-family: 'coneria_script_demoregular';
    font-size: 18px;
    text-align: center;
    color: black;
}
.Header {
    background-color: white;
    width: 100%;
    height: 60px;
    -webkit-box-shadow: 0px 2px 5px 0px #292929;
    -moz-box-shadow: 0px 2px 5px 0px #292929;
    box-shadow: 0px 2px 5px 0px #292929;
    position: fixed;
}
.Menu {
    padding-right: 30px;
    height: 60px;
    float:right;
    font-family: 'coneria_script_demoregular';
    font-size: 20px;
    text-align: center;
}
.Menu ul {
    display: none;
    position: absolute;
}
.Menu li {
    margin:0 auto;
    display: inline-block;
    width: 100px;
}
.Menu li:hover > ul {
    margin:0 auto;
    right: 10px;
    display: block;
    font-family: 'drugsregular';
    font-size: 14px;
}
.Menu a {
    background-color: #363636;
    padding-top: 12px;
    text-decoration:none;
    height: 48px;
    width: 120px;
    display: block;
    transition: .20s ease-in-out;
    -moz-transition: .20s ease-in-out;
    -webkit-transition: .20s ease-in-out;
}
.Menu a:hover {
    background-color: #FF6EDB;
}
.Logo {
    float:left;
    padding-left: 20px;
    padding-top: 10px;
}
.container1 {
    width: 100%;
    padding-top: 60px;
    height: 400px;
}
.bkimage1 {
    background-image: url(images/personalroyalq.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 745px;
}
.title {
    width: 665px;
    padding-top: 170px;
    margin: 0 auto;
}
.lasmer {
    background-color: #363636;
    height: 35px;
    width: 90px;
    margin: 0 auto;
    -webkit-box-shadow: 0px 1px 1px 0px #1f1f1f;
    -moz-box-shadow: 0px 1px 1px 0px #1f1f1f;
    box-shadow: 0px 1px 1px 0px #1f1f1f;
    transition: .20s ease-in-out;
    -moz-transition: .20s ease-in-out;
    -webkit-transition: .20s ease-in-out;
}
.lasmer:hover {
    background-color: #ec4e8c;
}
.lasmertext {
    font-family: 'drugsregular';
    padding-left: 15px;
    padding-top: 5px;
}
.content {
    display: flex;
    margin: 0 auto;
    width: 1024px;
}
.firsti {
    margin: 0 auto;
    padding-right: 10px;
    padding-top: 25px;
}
.firstp {
    padding-top: 10px;
    width: 500px;
    height: 370px;
    margin: 0 auto;
}

.firstp p {
    font-family: 'drugsregular';
    font-size: 16px;
    color: black;
    text-align: justify;
}

.container2 {
    height: 1000px;
}
.bkimage2 {
    height: 1000px;
    background-image: url(images/bkimage2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.content2title {
    margin:0 auto;
    padding-top: 90px;
}
.content2 {
    margin:0 auto;
    padding-top: 30px;
    height: 700px;
    width: 1024px;
    display: flex;
}
.c2leftimage {
    margin: 0 auto;
    width: 453px;
}
.c2rightimage {
    margin: 0 auto;
    width: 453px;
    height: 453px;
}
.footerbk {
    width: 100%;
    height: 350px;
    background-color: #070707;
}
.footer {
    margin:0 auto;
    width: 1024px;
    height: 350px;
}
.firstfooter {
    margin: 0 auto;
    display: flex;
}
.firstfooter p {

}
.firstfirstfooter {
    padding: 15px 0px 0px 30px;
}
.secondsecondfooter {
    padding: 15px 0px 0px 30px;
}
.thirdthirdfooter {
    padding: 15px 0px 0px 30px;
}
.fourthfourthfooter {
    padding: 15px 0px 0px 30px;
}
.secondfooter {
    display: flex;
}
.secondfooter a{
    color: #FF6EDB;
    font-family: 'drugsregular';
    font-size: 24px;
    opacity: 1;
    transition: opacity .20s ease-in-out;
    -moz-transition: opacity .20s ease-in-out;
    -webkit-transition: opacity .20s ease-in-out;
}
.secondfooter a:hover {
    opacity: 0.5;
}
.firstfirstfooter {
    padding: 10px 0px 0px 0px;
}
.secondsecondfooter {
    padding: 10px 0px 0px 30px;
}
.thirdthirdfooter {
    padding: 10px 0px 0px 30px;
}
.fourthfourthfooter {
    padding: 10px 0px 0px 30px;
}
.thirdfooter {
    display: flex;
}
.firstfirstfirstfooter {
    padding: 75px 0px 0px 30px;
}
.fourthfooter {
    display: flex;
}
.firstfirstfirstfirstfooter {
    padding: 0px 0px 0px 0px;
}
.secondsecondsecondsecondfooter {
    padding: 0px 0px 0px 30px;
}
.thirdthirdthirdthirdfooter {
    padding: 0px 0px 0px 30px;
}
.fourthfourthfourthfourthfooter {
    padding: 0px 0px 0px 30px;
}
@media screen and (max-width: 800px) {
.Header {
    position: relative;
}
.container1 {
    padding-top: 0px;
}
.bkimage1 {

}
.title {
    width: 440px;
}
.content {
    display: inline;
}
.firsti {
    width: 440px;
}
.firstp {
    height: 400px;
    width: 440px;
}
.container2 {
    height: 1400px;
}
.bkimage2 {
    height: 1400px;
}
.content2title {
    padding-top: 30px;
}
.content2 {
    display: inline;
}
.footerbk {
    height: 650px;
}
.footer {
    width: 440px;
}
.firstfooter {
    width: 250px;
}
.firstfirstfooter {
    padding: 10px 0px 0px 0px;
}
.secondfooter {
    padding-left: 30px;
}
.fourthfooter {
    display: inline;
}
.firstfirstfirstfirstfooter {
    padding: 0px 0px 0px 30px;
}
.secondsecondsecondsecondfooter {
    padding: 5px 0px 0px 30px;
}
.thirdthirdthirdthirdfooter {
    padding: 10px 0px 0px 30px;
}
.fourthfourthfourthfourthfooter {
    padding: 5px 0px 0px 30px;
}
}

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Royal Q UF</title>

</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
        <div class="Header">

            <div class="Logo">
                <a href="index.html"><img src="images/royalqlogo.png"></a>
            </div>
            <div class="Menu">
                <nav>
                <li><a href="#">Meny</a>
                    <ul>
                        <a href="http://www.yourvismawebsite.com/royal-q-uf/natbutik">Nät</br>Butik</a>
                        <a href="kontakt.html">Kontakt</a>
                    </ul>
                </li>
                </nav>
            </div>
        </div>
    
        <div class="container1">
            
            <div class="bkimage1">
                
            <div class="title">
                
                <h1>
                Royal Q
                </h1>
                <p>
                Royal Q lovar dig en parfym som du aldrig kommer glömma.
                Med unika aromer av Italiensk ursprung ger dig den en sensuell doft som är oemotståndlig...
                </p>
            </div>
            <a href="#content">
            <div class="lasmer">
                
                <div class="lasmertext">Läs Mer</div>
            
            </div>
            </a>
            </div>
            
            <div class="content">
            <a name="content"></a>
                <div class="firsti">
                <img src="css/images/bild1.jpg" width="440px" height="330px">
                </div>
                <div class="firstp">
                    
                <p>
                    Hej! Royal Q lovar dig en parfym som du aldrig kommer glömma. Med unika aromer av Italiensk
                    ursprung så ger dig den en sensuell doft som är oemotståndlig. Med detta tillkommer även
                    en snyggt designad flaska som är ensam i sitt slag med en högklassig förpackning.
                </p>
                <p>
                    Utöver vår parfym bär vi även botemedlet mot vintern. På Royal Q erbjuder vi exotiska
                    badbomber med olika lukter, färger och former. Dessa badbomber kommer ge dig en stund
                    för ro och avkoppling som får dig att glömma vintertiden med ett dopp.
                </p>
                <p>
                    Vår produktion är etablerad i Alingsås och vi säljer produkterna genom
                    återförsäljning, direktförsäljning och försäljning via internet. Vår ide är att erbjuda produkter som är unika och håller en hög klass men                         till ett rimligt pris.
                </p>
                    
                </div>
            </div>
            
            <div class="container2">
            <div class="bkimage2">
            <div class="content2title">
                <h1>Följ oss på våra sociala medier!</h1>
            </div>
            <div class="content2">
                
            <div class="c2leftimage">
                <a href="https://www.instagram.com/royalq_uf/"><img src="css/images/instagram1.png"></a>
                
<script src="http://snapwidget.com/js/snapwidget.js"></script>
<iframe src="http://snapwidget.com/in/?u=cm95YWxxX3VmfGlufDEwMHwzfDN8fG5vfDV8ZmFkZU91dHxvblN0YXJ0fHllc3x5ZXM=&ve=230116" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%;"></iframe>

            </div>
            <div class="c2rightimage">
                <a href="https://www.facebook.com/Royal-Q-UF-770187479756914/?fref=ts"><img src="css/images/facebook1.png"></a>
                <div class="fb-page" data-href="https://www.facebook.com/Royal-Q-UF-770187479756914" 
                data-tabs="timeline" data-width="453" data-height="453" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
            </div>
            </div>
            </div>
            </div>
            <div class="footerbk">
                <div class="footer">
                    <div class="firstfooter">
                        <div class="firstfirstfooter">
                            <p>Copyright © 2015-2016 Royal Q UF. Alla rättigheter reserverade.</p>
                        </div>
                    </div>
                    <div class="secondfooter">
                        <div class="firstfirstfooter">
                            <a href="https://www.instagram.com/royalq_uf/">Instagram</a>
                        </div>
                        <div class="secondsecondfooter">
                            <a href="https://www.facebook.com/Royal-Q-UF-770187479756914/?fref=ts">Facebook</a>
                        </div>
                    </div>

                    <div class="thirdfooter">
                        <div class="firstfirstfirstfooter">
                            <h1>VÅRA SPONSORER</h1>
                        </div>
                    </div>
                    <div class="fourthfooter">
                        <div class="firstfirstfirstfirstfooter">
                            <img src="css/images/kicks.png" height="65" width="174">
                        </div>
                        <div class="secondsecondsecondsecondfooter">
                            <img src="css/images/ica_maxi.png" height="57" width="138">
                        </div>
                        <div class="thirdthirdthirdthirdfooter">
                            <img src="css/images/skor.png" height="69" width="300">
                        </div></br>
                        <div class="fourthfourthfourthfourthfooter">
                            <img src="css/images/sparbanken.png" height="70" width="230">
                        </div>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>

Answer 1

Fixed widths are your problem(of images or texts) - try to have it in percent, not fixed(in pixels)...at least for device widths smaller that 500px or so.

Answer 2

As i have seen you have add width in PX you have used only one media query

@media screen and (max-width: 800px)   

try to add more query and rest all widths and also you need to make images responsive to do for images add these properties img{display: block; max-width:100%; height: auto;}

Answer 3

This CSS causes the issue:

@media screen and (max-width: 800px)
.title {
    width: 440px;
}

At VERY small screen sizes the 440px will exceed the screen. Try 90% or something instead.

Answer 4

you apply fix width change all width to media query

Example

.footer {
    margin:0 auto;
    width: 1024px;
    height: 350px;
}
c2leftimage {
    margin: 0 auto;
    width: 453px;
}
.c2rightimage {
    margin: 0 auto;
    width: 453px;
    height: 453px;
}