Why is the width: 100% not working for my responsive design?

Question

I am creating my portfolio and I stumbled upon an error, which I am not able to resolve for a responsive design. Using the chrome developer tool, I see that my width: 1000% is struck out when the screen width is less than or equal 1200px;

Look at the image, the red border is just there to make sure that the media query was indeed working, I have stripped a lot of my code for ease, but below are what I think is relative.

header image

We can see that width is struck out, and I still have the vertical scroll.

HTML code:

<header>
    <nav>
        <div class="row">
            <img class="logo" src="../img/logo.svg" alt="asheem logo">
            <ul class="main-nav">
                <li><a href="#">Current Projects</a></li>
                <li><a href="#">Previous Projects</a></li>
                <li><a href="#">Contact me!</a></li>
            </ul>
        </div>
    </nav>
    <div class="hero-text-box">
        <h1>Asheem Chhetri</h1>
        <a class="btn btn-full" href="#">Projects</a>
        <a class="btn btn-ghost" href="#">Show me more</a>
    </div>
</header>

CSS code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    background-color: #fff;
    color: #6d6d6d;
    font-family: 'Exo', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
.clearfix{
    zoom: 1;
}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/*------------------------------------------------
Reusable components
------------------------------------------------*/
.row{
    max-width: 1140px;
    margin: 0 auto;
}
.box{
    padding: 1%;

}
section{
    padding: 80px 0;
/*    height: 100vh;This solved the page flow problem for now. */
}
/*------------------------------------------------
Header
------------------------------------------------*/
header{
    background-image:  url(../img/imageForMain2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    background-attachment: fixed;
    height: 100vh;
}
h1, h2, h3, h4{
/*    text-align: center;*/
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;

}
h1{
    margin-top: 0;
    margin-bottom: 20px;
    color: white;
    font-size: 200%;
    word-spacing: 4px;
}
.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 20%;
    left: 50%;
    -webkit-transform: translate(-50%, -20%);
    transform: translate(-50%, -20%);
}

Media Query Code:

/*------------------------------------------
Big tablets to 1200px(width smaller than 1140px)
-------------------------------------------*/
@media only screen and (max-width: 1200px){
    .hero-text-box{
        width: auto;
        padding: 0 2%;
        border: 1px solid red;
    }
    .row{
        padding: 0 2%;
    }
}

PS: I have this in my head tag already:

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

So I clearly do not understand, why I am getting the vertical scroll? and the overflow when the screen size is around 1200px? Thank you for the help!

Answer 1

The main reason why your width is not responsive is because youre using px(pixels), Pixels can be very useful when you're making definite size/width, Use, percentage for your width instead of pixel , it will solve your problem.

as for your media query , use percentage too. set a min-width() for tablets, and different Media query for iphone , nexus and so on. The reasons doing so , because sometimes percentage doesnt solve all the issues.. you might face some layout bug along the way, But to solve that issue when you face that is simple,

When screen size is small, use pixels . Not percentage. but it depends on how you use it .
Overall, to solve your main issue . Use percentage. I hope it helps :)
Cheers