Media Query Div Not Changing Width But Everything Else Works

I am trying to adjust the width of a div when the browser decreases in size using max-width. The div does everything but change width. I have looked at it through the developer too

Solution 1:

Instead of putting the media=screen in the head, for your responsive.css file, use this:

@media (max-width:500px){
    .left {
       width: 800px;
       background-color: red;
    }

    .containerRight {
       display: none;
    }

}

Learn the basics about media queries here: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. This should help you get started.