The menu block does not stretch in width

#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>