html - My header image isn't responsive -

i'm making website course in webdesign , 1 criteria responsive (resize content fit screen size). in site every image , text paragraph size according screen sizes full hd iphone size.. except header image stays locked in place when scale down, when it's down mobile resolution have scroll right see image.

here's html , css codes header image:

html:

<div class="container_14">    <div class="grid_12">       <a href="index.html">          <p align="center"><img src="images/logo2.png"></p>       </a>    </div> </div>     

css:

.container_14 { margin-left: auto; margin-right: auto; width: 1200px; }  .container_14 .grid_12 { width:97.5%; height:90px; }  img { max-width: 100%; } 

link code random same size images.. http://jsfiddle.net/hac4cfrn/

if want .container_14 adapt various screens stay @ 1200px width if there’s enough space, use @media query:

.container_14 {    margin-left: auto;    margin-right: auto;    width: 1200px;  }    @media screen , (max-width:1200px){    .container_14 {      width: 100%;    }  }    .container_14 .grid_12 {    width:97.5%;    height:90px;  }    img {    max-width: 100%;  }

<header>    <div class="container_14">  	   <div class="grid_12">            <a href="index.html">               <p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>            </a>  	   </div>      </div>         </header>

you can add second @media query image inside. it’s possible without container.

otherwise use 100% width.