Блок меню не растягивается по ширине

176
10 декабря 2016, 10:29

Не получается сделать так, чтобы при уменьшении экрана блок меню и футер были по всей ширине экрана

#wrap { 
  display: none; 
  opacity: 0.8; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  padding: 16px; 
  background-color: rgba(1, 1, 1, 0.725); 
  z-index: 100; 
  overflow: auto; 
} 
 
#window { 
  width: 400px; 
  height: 460px; 
  margin: 50px auto; 
  display: none; 
  background: #fff; 
  z-index: 200; 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  padding: 16px; 
  background: #008D27; 
} 
 
.close { 
  margin-left: 364px; 
  margin-top: 4px; 
  cursor: pointer; 
} 
 
* { 
  margin: 0; 
  padding: 0; 
  font-family: 'PT Sans', sans-serif; 
} 
 
body, 
html { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
h1, 
h2, 
.sitebar_header { 
  color: #FF7D1E; 
} 
 
h3 { 
  color: #4C4C4C; 
} 
 
a { 
  text-decoration: none; 
  color: #008D27 
} 
 
.clearAll { 
  clear: both; 
} 
 
#wrapper { 
  min-width: 1180px; 
  min-height: 100%; 
  position: relative; 
  display: inline-block; 
} 
 
#header_wrap { 
  background: #ccc none repeat scroll 0 0; 
  width: 100%; 
} 
 
#header_top { 
  height: 120px; 
  width: 82%; 
  min-width: 1180px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 20px; 
} 
 
.logo_two { 
  margin-left: 60px; 
} 
 
.socials_ico>li { 
  display: block; 
  float: left; 
  padding-right: 10px; 
} 
 
.socials_ico { 
  list-style: none; 
  display: block; 
  right: 104px; 
  position: absolute; 
  top: 100px; 
} 
 
#menu_top_wrap { 
  width: 100%; 
  background: #FFEEE1; 
} 
 
#menu_top { 
  width: 82%; 
  background: #FFEEE1; 
  height: 46px; 
  margin: 0 auto; 
  color: #008D27; 
  min-width: 1180px; 
} 
 
.menu_top_wrap { 
  width: 100%; 
  height: 46px; 
  background: #FFEEE1; 
  position: relative; 
} 
 
#menu_top ul { 
  list-style: none; 
  line-height: 46px; 
} 
 
#menu_top li { 
  display: block; 
  float: left; 
  padding-right: 30px; 
} 
 
#menu_top > ul> a> li:hover { 
  color: #FF7D1E !important; 
} 
 
.tel { 
  font-size: 36px; 
  float: right; 
  color: #008d27; 
} 
 
.tel_desc { 
  font-size: 22px; 
  color: #FF7D1E; 
  float: right; 
} 
 
.my-slider { 
  min-width: 1180px; 
  background: #ccc; 
  height: auto; 
  margin: 0 auto; 
} 
 
#content { 
  width: 65%; 
  background: #fff; 
  height: 600px; 
  margin: 30px; 
  float: left; 
} 
 
#sitebar_l { 
  width: 224px; 
  background: #fff; 
  height: 1800px; 
  float: left; 
  border-right: 1px solid #DADADA; 
  margin-left: 110px; 
  margin-top: 35px; 
} 
 
.sitebar_header { 
  font-size: 18px; 
  background: #FFEEE1; 
  display: block; 
  padding: 5px; 
} 
 
ul.categories_sitebar { 
  list-style: square; 
  color: #008D27; 
  margin-left: 28px; 
  margin-top: 15px; 
} 
 
ul.categories_sitebar>li>a { 
  text-decoration: none; 
  color: #008D27; 
} 
 
ul.categories_sitebar>li>a:hover { 
  color: #FF7D1E; 
} 
 
ul.categories_sitebar>li { 
  padding-bottom: 7px; 
  color: #FF7D1E; 
} 
 
#main_content { 
  min-width: 940px; 
  background: #fff; 
} 
 
#main_text {} 
 
.main_h1, 
.main_par {} 
 
.main_h1 { 
  margin-bottom: 15px; 
} 
 
.text_zakaz { 
  display: block; 
  text-align: center; 
  margin-top: 30px; 
  color: #FF7D1E; 
  font-style: italic; 
} 
 
#doctors_block { 
  min-width: 940px; 
  height: 300px; 
  margin-top: 30px; 
} 
 
.online_zakaz { 
  display: block; 
  margin: 15px auto; 
  width: 220px; 
  height: 50px; 
  background: #008D27; 
  color: #fff; 
  font-size: 16px; 
  font-weight: 600; 
  text-align: center; 
  line-height: 50px; 
} 
 
.online_zakaz:hover { 
  background: #ff7d1e none repeat scroll 0 0; 
} 
 
.top_zakaz { 
  position: absolute; 
  right: 112px; 
  bottom: -15px; 
  height: 46px; 
} 
 
.action_img { 
  margin-top: 15px; 
  margin-left: 15px; 
  border: 3px solid transparent; 
} 
 
.action_img:hover { 
  border: 3px solid #008D27; 
} 
 
.action_title { 
  font-size: 16px; 
  max-width: 190px; 
  display: block; 
  margin: 10px auto; 
} 
 
.doctors_list { 
  margin-top: 15px; 
  display: inline-block; 
} 
 
 
/* 
.hr{ 
 
	    border: 1px dotted #DADADA; 
    margin: 20px auto; 
    width: 900px; 
} 
*/ 
 
.doctors_list > ul { 
  list-style: none; 
  margin-top: 10px; 
} 
 
.doctors_list >li { 
  display: block; 
  float: left; 
  padding-right: 40px; 
} 
 
.doctors_list > li >img { 
  width: 180px; 
  height: 140px; 
  border: 2px solid transparent; 
} 
 
.doctors_list > li >img:hover { 
  border: 2px solid #008D27; 
} 
 
#news_block { 
  height: 225px; 
  margin-top: 30px; 
  min-width: 940px; 
} 
 
.news_item { 
  float: left; 
  margin-top: 15px; 
  margin-right: 20px; 
  min-width: 260px; 
  padding: 5px; 
  width: 270px; 
  border: 3px solid transparent; 
} 
 
.news_item:hover { 
  border: 3px solid #008D27; 
  border-left: 3px solid #008D27; 
  border-right: 3px solid #008D27; 
} 
 
.news_prew_text { 
  display: inline-block; 
} 
 
.news_h3 { 
  margin-bottom: 5px; 
} 
 
.news_h3:hover { 
  color: #008D27; 
} 
 
.news_date { 
  background: #ff7d1e none repeat scroll 0 0; 
  margin-left: 12px; 
  padding: 1px 3px; 
  float: right; 
} 
 
#programs_block { 
  min-width: 940px; 
  height: 190px; 
  background: #FFEEE1; 
  padding-top: 2px; 
} 
 
.programs_header { 
  display: block; 
  margin-top: 15px; 
  margin-bottom: 15px; 
} 
 
.programs_item { 
  width: 415px; 
  float: left; 
  margin-left: 23px; 
  margin-top: 25px; 
  border: 1px solid #999; 
  padding: 20px 10px; 
  background: #fff; 
} 
 
.programs_item:hover { 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
  border: 1px solid #008D27; 
} 
 
.program_prew_img { 
  float: left; 
  margin-right: 15px; 
} 
 
.program_prew_h3 { 
  margin-bottom: 7px; 
  color: #008D27; 
} 
 
.second_prog { 
  float: left; 
} 
 
.all_programs_link { 
  display: inline-block; 
  float: right; 
  margin-right: 35px; 
  font-size: 20px; 
  margin-top: 10px; 
} 
 
.all_programs_link:hover { 
  color: #FF7D1E; 
} 
 
#footer { 
  background: #E7E7E8; 
  width: 100%; 
  height: 330px; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
} 
 
.menu_footer { 
  margin-left: 113px; 
  margin-top: 30px; 
  margin-bottom: 30px; 
  position: relative; 
} 
 
.menu_footer > ul { 
  list-style: none; 
} 
 
.menu_footer > ul>a>li { 
  padding-bottom: 6px; 
} 
 
.menu_footer ul:first-child { 
  float: left; 
  margin-right: 50px; 
} 
 
.footer_text { 
  margin-right: 112px; 
  bottom: 0px; 
  position: absolute; 
  right: 0; 
} 
 
#foot_wrap { 
  margin: 0 auto; 
  padding-top: 25px; 
  padding-bottom: 25px; 
  width: 82%; 
  min-width: 1180px; 
} 
 
.foot_ico { 
  position: absolute; 
  top: 35px; 
} 
 
.bw { 
  color: #606060; 
} 
 
.map { 
  float: right; 
} 
 
 
/* ----------------------------------TOP BUTTON */ 
 
#toTop { 
  display: none; 
  text-decoration: none; 
  position: fixed; 
  bottom: 10px; 
  right: 10px; 
  overflow: hidden; 
  width: 51px; 
  height: 51px; 
  border: none; 
  text-indent: 100%; 
  background: url(../images/ui.totop.png) no-repeat left top; 
} 
 
#toTopHover { 
  background: url(../images/ui.totop.png) no-repeat left -51px; 
  width: 51px; 
  height: 51px; 
  display: block; 
  overflow: hidden; 
  float: left; 
  opacity: 0; 
  -moz-opacity: 0; 
  filter: alpha(opacity=0); 
} 
 
#toTop:active, 
#toTop:focus { 
  outline: none; 
} 
 
 
/* ---------------------------------TOP BUTTON END */ 
 
 
/*---------------------------------------SLIDER CSS START-----------------*/ 
 
.slider { 
  z-index: 9; 
  width: 1199px; 
  height: 290px; 
  overflow: hidden; 
  margin: 0 0 7px; 
  position: relative; 
  margin-right: auto; 
  margin-left: auto; 
} 
 
.slider ul, 
.slider li { 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
} 
 
.slider ul { 
  width: 9999px; 
} 
 
.slider ul li { 
  list-style-type: none; 
  float: left; 
  width: 1199px; 
  height: 290px; 
} 
 
.slider .nav { 
  position: absolute; 
  left: 15px; 
  bottom: 12px; 
} 
 
.slider .nav span { 
  opacity: 0.9; 
  background: #fff; 
  margin: 0 8px 0 0; 
  width: 16px; 
  height: 16px; 
  border-radius: 8px; 
  cursor: pointer; 
  overflow: hidden; 
  display: block; 
  float: left; 
  box-shadow: 0 1px 2px #000; 
} 
 
.slider .nav span.on { 
  background: #2e9419; 
} 
 
 
/*---------------------------------------SLIDER CSS-----------------*/ 
 
 
/*---------------------------------------CONTACTS-----------------*/ 
 
#feedback-form { 
  max-width: 400px; 
  padding: 2%; 
  border-radius: 3px; 
  background: #f1f1f1; 
} 
 
#feedback-form [required] { 
  width: 100%; 
  box-sizing: border-box; 
  margin: 2px 0 2% 0; 
  padding: 2%; 
  border: 1px solid rgba(0, 0, 0, .1); 
  border-radius: 3px; 
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .2) inset, 0 0 transparent; 
} 
 
#feedback-form [required]:hover { 
  border-color: #7eb4ea; 
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .2) inset, 0 0 transparent; 
} 
 
#feedback-form [required]:focus { 
  outline: none; 
  border-color: #7eb4ea; 
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .2) inset, 0 0 4px rgba(35, 146, 243, .5); 
  transition: .2s linear; 
} 
 
#feedback-form [type="submit"] { 
  padding: 2%; 
  border: none; 
  border-radius: 3px; 
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; 
  background: #669acc; 
  color: #fff; 
} 
 
#feedback-form [type="submit"]:hover { 
  background: #5c90c2; 
} 
 
#feedback-form [type="submit"]:focus { 
  box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05); 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
 
  <head> 
 
 
    <script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <script type="text/javascript" src="js/jquery.sudoSlider.min.js"></script> 
    <script src="js/easing.js" type="text/javascript"></script> 
    <!-- UItoTop plugin --> 
    <script src="js/jquery.ui.totop.js" type="text/javascript"></script> 
    <!-- Starting the plugin --> 
    <title>(X)HTML+CSS код шаблона</title> 
    <meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <!-- jquery --> 
    <script type="text/javascript"> 
      //Функция показа 
      function show(state) { 
 
        document.getElementById('window').style.display = state; 
        document.getElementById('wrap').style.display = state; 
      } 
 
    </script> 
  </head> 
 
  <body> 
 
 
    <div id="wrapper"> 
      <div id="window"> 
 
        <!-- Картинка крестика--> 
        <!--<img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">--> 
 
        <form method="POST" id="feedback-form"> 
          Как к Вам обращаться: 
          <input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name"> Email для связи: 
          <input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email"> Ваш телефон: 
          <input name="telFF" required placeholder="например, 89000000000" x-autocompletetype="tel" type="tel"> К какому врачу записываетесь: 
          <input name="docFF" required placeholder="ФИО врача или специализация" x-autocompletetype="tel" type="tel"> Ваше сообщение: 
          <textarea name="messageFF" required rows="5"></textarea> 
          <input type="submit" value="отправить"> 
        </form> 
 
        <script> 
          document.getElementById('feedback-form').addEventListener('submit', function(evt) { 
            var http = new XMLHttpRequest(), 
              f = this; 
            evt.preventDefault(); 
            http.open("POST", "contacts.php", true); 
            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
            http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value + "&telFF=" + f.telFF.value + "&docFF=" + f.docFF.value); 
            http.onreadystatechange = function() { 
              if (http.readyState == 4 && http.status == 200) { 
                alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!'); 
                f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки) 
                f.messageFF.value = ''; 
              } 
            } 
            http.onerror = function() { 
              alert('Извините, данные не были переданы'); 
            } 
          }, false); 
 
        </script> 
        </center> 
 
      </div> 
 
      <div id="header_top"> 
 
        <img src="images/logo.png" width="470" height="103"> 
        <img class="logo_two" src="images/logo2.png" width="337" height="103"> 
        <span class="tel">+(993)348998325<br><span class="tel_desc">горячая линия</span></span> 
        <ul class="socials_ico"> 
          <li> 
            <a href="#"><img class="soc_img" src="images/youtube.png" width="32" height="32"></a> 
          </li> 
          <li> 
            <a href="#"><img class="soc_img" src="images/facebook.png" width="32" height="32"></a> 
          </li> 
          <li> 
            <a href="#"><img class="soc_img" src="images/vkontakte.png" width="32" height="32"></a> 
          </li> 
 
        </ul> 
 
      </div> 
      <div class="clearAll"></div> 
      <div class="menu_top_wrap"> 
        <div id="menu_top"> 
          <ul> 
            <a href="#"> 
              <li>Услуги</li> 
            </a> 
            <a href="#"> 
              <li>О нас</li> 
            </a> 
            <a href="#"> 
              <li>Цены</li> 
            </a> 
            <a href="#"> 
              <li>Врачи</li> 
            </a> 
            <a href="#"> 
              <li>Пациентам</li> 
            </a> 
            <a href="#"> 
              <li>Акции</li> 
            </a> 
            <a href="#"> 
              <li>Программы</li> 
            </a> 
            <a href="#"> 
              <li>Вопрос-Ответ</li> 
            </a> 
            <a href="#"> 
              <li>Контакты</li> 
            </a> 
          </ul> 
 
        </div> 
        <a href="#"><span  onclick="show('block')" class="myButton online_zakaz top_zakaz">ЗАПИСЬ НА ПРИЕМ</span></a> 
      </div> 
      <div class="clearAll"></div> 
 
 
      <div class="slider_wrap"> 
 
        <div class="slider"> 
          <ul> 
            <li><img src="images/slide1.jpg" alt="image description" /></li> 
            <li><img src="images/slide2.jpg" alt="image description" /></li> 
            <li><img src="images/slide1.jpg" alt="image description" /></li> 
            <li><img src="images/slide2.png" alt="image description" /></li> 
            <li><img src="images/slide2.jpg" alt="image description" /></li> 
          </ul> 
 
        </div> 
 
      </div> 
      <div class="clearAll"></div> 
 
      <div id="sitebar_l"> 
 
        <span class="sitebar_header">Наши услуги</span> 
 
        <ul class="categories_sitebar"> 
          <li><a href="#">Хирургия</a></li> 
          <li><a href="#">Дерматология</a></li> 
          <li><a href="#">Педиатрия</a></li> 
          <li><a href="#">Стомотология</a></li> 
          <li><a href="#">Лаборатория</a></li> 
          <li><a href="#">Педиатрия</a></li> 
          <li><a href="#">Дерматология</a></li> 
          <li><a href="#">Стомотология</a></li> 
          <li><a href="#">Педиатрия</a></li> 
          <li><a href="#">Стомотология</a></li> 
          <li><a href="#">Лаборатория</a></li> 
          <li><a href="#">Педиатрия</a></li> 
          <li><a href="#">Дерматология</a></li> 
          <li><a href="#">Стомотология</a></li> 
          <li><a href="#">Лаборатория</a></li> 
          <li><a href="#">Педиатрия</a></li> 
          <li><a href="#">Дерматология</a></li> 
        </ul> 
        <span class="sitebar_header">Наши акции</span> 
 
        <a href="#"><img class="action_img" src="images/act1.jpg" width="180" height="140" alt="текст" title="title"> 
          <span class="action_title">Давно выяснено, чт выяснено, чт выяснено, что при</span></a> 
 
        <a href="#"><img class="action_img" src="images/act2.jpg" width="180" height="140" alt="текст" title="title"> 
          <span class="action_title">Давно выяснено, что но, что при</span></a> 
      </div> 
      <div id="content"> 
 
 
 
        <div id="main_content"> 
          <div id="main_text"> 
            <h1 class="main_h1">Давно выяснено</h1> 
            <p class="main_par">Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в 
              абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым 
              словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, 
              юмористические варианты).</p> 
            <br/> 
            <p class="main_par">Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в 
              абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым 
              словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, 
              юмористические варианты).</p> 
            <br/> 
            <p class="main_par">Б</p> 
            <br/> 
            <p class="main_par">Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в 
              абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым 
              словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, 
              юмористические варианты).</p> 
            </p> 
          </div> 
          <div id="doctors_block"> 
            <h2>Наши врачи</h2> 
 
            <ul class="doctors_list"> 
              <li class="view"><img src="images/doc1.jpg"></li> 
 
              <li class="view"><img src="images/doc2.jpg"></li> 
              <li class="view"><img src="images/doc3.png 
						"></li> 
              <li class="end_block_doct"><img src="images/doc4.jpg"></li> 
            </ul> 
 
            <span class="text_zakaz">Вы можете записаться на прием к нашим специалистам</span> 
 
            <a href="#"><span class="online_zakaz">ЗАПИСЬ НА ПРИЕМ</span></a> 
          </div> 
 
          <div id="news_block"> 
            <h2>Новости клиники</h2> 
 
            <div class="news_item"> 
              <span class="news_date">12/33/22</span> 
              <h3 class="news_h3">Заголовок новостиfbfgfsg  g rzg rga</h3> 
 
              <span class="news_prew_text">много веб-страниц всё ещё дожидаются своего  
                    		настоящего рождения</span> 
              <a href="#">Подробнее</a> 
 
            </div> 
            <div class="news_item"> 
              <span class="news_date">12/33/22</span> 
              <h3 class="news_h3">Заголовок новости</h3> 
              <span class="news_prew_text">много веб-страниц всё ещё дожидаются своего  
                    		настоящего рождения</span> 
              <a href="#">Подробнее</a> 
 
            </div> 
            <div class="news_item"> 
              <h3 class="news_h3">Заголовок новости</h3> 
              <span class="news_prew_text">много веб-страниц всё ещё дожидаются своего  
                    		настоящего рождения</span> 
              <a href="#">Подробнее</a> 
 
            </div> 
 
 
          </div> 
          <div id="prog_wrap"> 
            <h2 class="programs_header">Программы клиники</h2> 
            <div id="programs_block"> 
 
              <div class="programs_item"> 
                <img class="program_prew_img" src="images/prog1.png" width="70" height="70"> 
                <h3 class="program_prew_h3">Заголовок программы</h3> 
                <span class="programs_prew_txt">много веб-страниц всё ещё дожидаются своего  
                    		настоящего рождения</span> 
 
              </div> 
 
              <div class="programs_item second_prog"> 
                <img class="program_prew_img" src="images/prog2.png" width="70" height="70"> 
                <h3 class="program_prew_h3">Заголовок программы два</h3> 
                <span class="programs_prew_txt">много веб-страниц всё ещё дожидаются своего  
                    		настоящего рождения</span> 
 
              </div> 
              <a class="all_programs_link" href="#">все программы</a> 
            </div> 
 
 
 
          </div> 
 
        </div> 
 
 
 
      </div> 
      <div id="footer"> 
        <div class="menu_footer"> 
          <ul class="first_foot_menu"> 
            <a href="#"> 
              <li>Услуги</li> 
            </a> 
            <a href="#"> 
              <li>О нас</li> 
            </a> 
            <a href="#"> 
              <li>Цены</li> 
            </a> 
            <a href="#"> 
              <li>Врачи</li> 
            </a> 
            <a href="#"> 
              <li>Пациентам</li> 
            </a> 
          </ul> 
          <ul> 
            <a href="#"> 
              <li>Акции</li> 
            </a> 
            <a href="#"> 
              <li>Программы</li> 
            </a> 
            <a href="#"> 
              <li>Вопрос-Ответ</li> 
            </a> 
            <a href="#"> 
              <li>Контакты</li> 
            </a> 
          </ul> 
          <ul class="socials_ico foot_ico"> 
            <li> 
              <a href="#"><img class="soc_img" src="images/youtube.png" width="32" height="32"></a> 
            </li> 
            <li> 
              <a href="#"><img class="soc_img" src="images/youtube.png" width="32" height="32"></a> 
            </li> 
            <li> 
              <a href="#"><img class="soc_img" src="images/vkontakte.png" width="32" height="32"></a> 
            </li> 
 
          </ul> 
          <span class="footer_text" style="color:#4C4C4C">Все права защищены.<span> Клиника семейной медицины</span> 
 
        </div> 
 
        <hr> 
        <div id="foot_wrap"> 
          <img src="images/logo_bw.png" width="470" height="103"> 
          <img class="logo_two" src="images/logo2_bw.png" width="337" height="103"> 
          <span class="tel bw">+(993)348998325<br><span class="tel_desc bw">горячая линия</span></span> 
        </div> 
      </div> 
    </div> 
 
    <script type="text/javascript"> 
      $(document).ready(function() { 
        /* 
        var defaults = { 
        containerID: 'toTop', // fading element id 
        containerHoverID: 'toTopHover', // fading element hover id 
        scrollSpeed: 1200, 
        easingType: 'linear' 
        }; 
        */ 
 
        $().UItoTop({ 
          easingType: 'easeOutQuart' 
        }); 
 
      }); 
 
    </script> 
 
    <script type="text/javascript"> 
      $(document).ready(function() { 
        $(".slider").each(function() { 
 
          var repeats = 5, // кількість повторювань автоматичного прокручування 
            interval = 2, // інтервал в секундах 
            repeat = true, // чи треба автоматично прокручувати (true/false) 
            slider = $(this), 
            repeatCount = 0, 
            elements = $(slider).find("li").length; 
 
          $(slider) 
            .append("<div class='nav'></div>") 
            .find("li").each(function() { 
              $(slider).find(".nav").append("<span data-slide='" + $(this).index() + "'></span>"); 
              $(this).attr("data-slide", $(this).index()); 
            }) 
            .end() 
            .find("span").first().addClass("on"); 
 
          // add timeout 
 
          if (repeat) { 
            repeat = setInterval(function() { 
              if (repeatCount >= repeats - 1) { 
                window.clearInterval(repeat); 
              } 
 
              var index = $(slider).find('.on').data("slide"), 
                nextIndex = index + 1 < elements ? index + 1 : 0; 
 
              sliderJS(nextIndex, slider); 
 
              repeatCount += 1; 
            }, interval * 4000); 
          } 
 
        }); 
      }); 
 
      function sliderJS(index, slider) { // slide 
        var ul = $(slider).find("ul"), 
          bl = $(slider).find("li[data-slide=" + index + "]"), 
          step = $(bl).width(); 
 
        $(slider) 
          .find("span").removeClass("on") 
          .end() 
          .find("span[data-slide=" + index + "]").addClass("on"); 
 
        $(ul).animate({ 
          marginLeft: "-" + step * index 
        }, 2000); 
      } 
 
      $(document).on("click", ".slider .nav span", function(e) { // slider click navigate 
        e.preventDefault(); 
        var slider = $(this).closest(".slider"), 
          index = $(this).data("slide"); 
 
        sliderJS(index, slider); 
      }); 
 
    </script> 
 
 
  </body> 
 
</html>

Answer 1

У вас многим элементам задана min-width: 1180px, что не позволяет адаптироваться меню. Дальше слайдеру .slider и элементам в нем у вас задана ширина и он сильно растягивает контейнер.

Добавте стили и увидете все проблемы.

<style>
* {
    min-width: inherit!important;
    }
.slider{
    display: none; 
    }   
</style>

И вообще почитайте вот эту статью о прогрессивной верстке если не значете что это, то в будущем вам очень сильно облегчит жизнь. https://habrahabr.ru/post/157115/

READ ALSO
Слайдер со статическим текстом owl-carousel

Слайдер со статическим текстом owl-carousel

Мне нужно сделать что-то подобное как в первом слайдере (самый верхний блок) http://wwwtemplatemonster

211
Google analytics js code

Google analytics js code

На сайте есть интеграция с Google Analytics, в таком виде я вижу её в аккаунте:

180
Как отобразить содержимое объекта

Как отобразить содержимое объекта

Есть модульное окно dijit/Dialog , в нем должено отображаться содержимое <div class="wrap-filters-table">, но вместо этого он просто пишет [object HTMLDivElement]Вопрос,...

259
Javascript задать css-класс при создании

Javascript задать css-класс при создании

Здравствуйте, подскажите пожалуйста, как задать css-класс компоненту при его создании динамическиКусок кода:

209