Why can't I change the width of my website while I'm normally viewing it, but I can do it-CodePudding

As you see I can't minimize more the width in viewing mode, but I can do it in Inspecting mode. Why?

Here is the code of my website:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <meta name="description" content="N"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="main.css" type="text/css"/>
    <meta name="robots" content="all"/>
</head>
<body>

    <section id="contact">
    
        <div >
        
            <a href="#"><i ></i></a>
            <a href="#"><i ></i></a>
            <a href="#"><i ></i></a>
            <a href="#"><i ></i></a>
            <a href="#"><i ></i></a>
            
        </div>
        
        <div >
        
            <div >
                <h1>Get In Touch</h1>
                <p>Call Or Email Us Regarding Question Or Issues</p>
            </div>
        
        </div>
        
        <div >
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db:0x2d4bd93a1eb25b41!2sArfa Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 
        </div>
    
    </section>

</body>
</html>

body{
    margin:0px;
    padding: 0px;
    background-color: #FFFFFF;
}

a{
    text-decoration: none;
}

.social a{
    padding: 20px;
    color:#7b7c7c;
    font-size:1.1rem;
}
#contact{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
}
.social{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
    color:#000000;
    transition: all ease 0.3s;
}
.contact-box{
    background-color:#434445;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 30px;
    box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
    font-family: Roboto;
    color: #e7eef3;
    font-size: 2.5rem;
    font-weight: lighter;
    margin: 0px;
    padding: 0px;
}
.c-heading p{
    font-family: Roboto;
    color:#cecece;
    font-size: 0.8rem;
    font-weight: lighter;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.map{
    
    box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}

@media(max-width:1100px){
    .map{
        display: none;
    }
}

@media(max-width:450px){
    .social{
        display: none;
    }
    .contact-box{
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
    }
    #contact{
        position: static;
        transform: translate(0,0);
        width:100%;
        height: 100vh;
        box-sizing: border-box;
    }
    .c-heading h1{
        font-size: 2.2rem;
        text-align: center;
    }
}

Viewing mode Inspecting mode

I tried something with the @media and max-width it is not working too. Why can't I change the width of my website while I'm normally viewing it, but I can do it while I am inspecting it?

I viewed the code and I can't see the problem.

CodePudding user response：

Your Code is actually Fine, its the minimum Browser size for chrome(which i tested on) and other browsers, I cant see why you would make it that small, but here is the minimum size i can get with inspect element

https://ibb.co/sCQQnV9

Its not your code, but the browser

hope it helps