@media only screen and (min-width: 480px) { 
   
 Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone  и так далее. 
   
 } 
   
 @media only screen and (min-width: 768px) { 
   
 Планшеты в режиме portrait. 
   
 } 
   
 @media only screen and (min-width: 992px) { 
   
 Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп. 
   
 } 
   
 @media only screen and (min-width: 1382px) { 
   
 Десктоп с большими разрешениями, телевизоры. 
   
 } 
  

Вот прописал эти параметры которые выше, при сужении браузера на компе дизайн меняется как положенно, становится узким и появляютсся полосы прокрутки, а вот открыл на телефоне и вот что получается дизайн меняется , но почемуто не растягивается на всю ширину экрана телефона, а помещает всю страницу на экран вместо растягиваниясайта по ширине и пролистыванием его вниз,   
 Подскажите какой параметр необходимо поменять? чтоб было как на картинке  
 _s019.radikal.ru/i630/1406/ce/5328aa936dc4.jpg  
  
  
 а нужно чтоб так было,  
  
 _s018.radikal.ru/i515/1406/e9/b2c1c5889798.jpg

Судя по всему, вы не то уменьшаете. Покажите нормальный код, чтобы было более понятно в чем причина.

Почитайте про мета тег viewport.

Спасибо помог <meta name="viewport" content="width=device-width">

Вроде работает нормально, но есть непонятное увеличение, сначала страницу открываешь нормально всё растягивает по ширине потом переходишь на другую вкладку там тоже всё норм, а потом возвращаешся на прошлую и там страца в увеличенном режиме , делаешь зум на минимум и все ок отображается, все таки присутствует непонятный зум, браузер хром.

Добавлено через 9 минут и 35 секунд
ещё на мобильнике небольшое смещение есть, причину не могу найти. смещение только на мобильнике


отступ от слов задан margin-left