почему может не срабатывать адаптивный дизайн
 

Вродебы все правильно, смотрите

@media screen and (max-width: 768px) { 
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
} 
  .center_panal{
	width:700px;
}
	 
.navbar-form .form-control {
     width: 200px;
   }
}
.navbar-form .form-control {
width: 400px; 
}

я не понимаю, есть же медиазапрос и указана ширина .navbar-form .form-control почему не меняется ширена

:blink:

imedia,
Попробуй правило без медиазапроса (строки 15-17) перетащить наверх. Возможно, они перекрывают правило в медиазапросе.

Яростный Меч, может я ошибаюсь, но до таких банальностей - люди должны догадываться сами...

imedia,
http://htmlbook.ru/samcss/kaskadirovanie

Rasy, а причем тут каскадирование, если идет банальное переопределение?

Lemme,
Ну да, каскадирование не причем, а вот приоритет есть.

Rasy, и приоритета нет.

Lemme,
Т.е код который ниже для одинакового селектора, назвать более приоритетным категорически запрещается?

Rasy, имхо, это не правильно.

Приоритет это: (из твоей же ссылки).

Стиль браузера.
Стиль автора.
Стиль пользователя.
Стиль автора с добавлением !important.
Стиль пользователя с добавлением !important.
этот список можно еще пополнить приоритетом (весом) селекторов.

А это обычное переопределение свойств.

Тот же пример с js

let a

if (true) {
  a = 1; // это как бы сработает
}

a = 2;

alert(a) // но в конце концов, получим 2