There is a block
.content { display: block; overflow: hidden; height:100px; margin: 0px auto; background-color: #22dd66; max-width: 750px; position: relative; color: #5d5d5d; font-family: 'Roboto', sans-serif; } In such a situation, the block is not centered, but closer to the right edge is pressed, but instead of setting max-width just set the width all the norms and the block in the center. I suppose that the problem is in the menu that is above this block . jsfiddle.net/3sp3fgs9/3/
.main { overflow: hidden; } .main { overflow: hidden; } or apply clearfix because there are floating blocks .wrapplogo { float: left; } .wrapplogo { float: left; } .div inside ul (rather than li ) is not correct. /*-------menu------------*/ @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); @import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic); @font-face { font-family: PFDinDisplayPro-Light; /* Имя шрифта */ src: url(fonts/pfdindisplaypro-light.ttf); /* Путь к файлу со шрифтом */ } a{text-decoration:none;} .cbp-hrmenu { width: 100%; background-color:#183d61; //font-family: 'Lato', Calibri, Arial, sans-serif; font-family:PFDinDisplayPro-Light; position:relative; } /* general ul style */ .cbp-hrmenu ul { margin: 0; padding: 0; list-style-type: none; font-family: 'Roboto', sans-serif; } /* first level ul style */ .cbp-hrmenu > ul, .cbp-hrmenu .cbp-hrsub-inner { width: 100%; /*text-align:center;*/ text-align:right; /*max-width: 88em;*/ max-width: 1350px; margin: 0 auto; /*padding: 0 1.875em;*/ } .cbp-hrmenu > ul > li { display: inline-block; } .cbp-hrmenu > ul > li > a { font-weight: 700; /*padding: 1em 2em;*/ padding: 1em 0.5em; color: #ffffff; display: inline-block; //font-family: 'Lato', Calibri, Arial, sans-serif; font-family:PFDinDisplayPro-Light; } /*.cbp-hrmenu > ul > li > a:hover { border-bottom: 2px solid #ffb732; }*/ .cbp-hrmenu > ul > li > a::before, .cbp-hrmenu > ul > li > a::after { display: inline-block; opacity: 0; -webkit-opacity: 0; -ms-opacity: 0; -moz-opacity: 0; -o-opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -o-transition: -o-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .cbp-hrmenu > ul > li > a::before { margin-right: 10px; content: '['; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } .cbp-hrmenu > ul > li > a::after { margin-left: 10px; content: ']'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } .cbp-hrmenu > ul > li > a:hover::before, .cbp-hrmenu > ul > li > a:hover::after, .cbp-hrmenu > ul > li > a:focus::before, .cbp-hrmenu > ul > li > a:focus::after { opacity: 1; -webkit-opacity: 1; -ms-opacity: 1; -moz-opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .cbp-hrmenu > ul > li.cbp-hropen a{ color: #fff; } /*----Эффект при наведении------*/ .cbp-hrsub-inner ul li a:hover { margin-left:7px; } .cbp-hrsub-inner ul li a { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; } /* sub-menu */ .cbp-hrmenu .cbp-hrsub { display: none; position: absolute; /*background: #183d61;*/ width: 100%; left: 0; background-color: rgba(24, 61, 97,.77); } .cbp-hropen .cbp-hrsub { display: block; padding-bottom: 7px; z-index:11; border-top: 2px solid #ffffff; z-index: 9000; } .cbp-hrmenu .cbp-hrsub-inner > div { width: 33%; float: left; padding: 0 2em 0; text-align:left; } .cbp-hrmenu .cbp-hrsub-inner:before, .cbp-hrmenu .cbp-hrsub-inner:after { content: " "; display: table; } .cbp-hrmenu .cbp-hrsub-inner:after { clear: both; } .cbp-hrmenu .cbp-hrsub-inner > div a { line-height: 2em; } .cbp-hrsub h4 { color: #ffb732; padding: 0.7em 0 0.5em; margin: 0; font-size: 117%; font-weight: 700; font-family: 'Lato', Calibri, Arial, sans-serif; } .iconmenu{ display:none; position:absolute; top:4px; right:5px; z-index: 1; } .container > header { width: 90%; max-width: 70em; margin: 0 auto; padding: 0 1.875em 3.125em 1.875em; } .container > header { padding: 2.875em 1.875em 1.875em; } .container > header h1 { font-size: 2.125em; line-height: 1.3; margin: 0; float: left; font-weight: 400; } .container > header span { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5em; padding: 0 0 0.6em 0.1em; } .container > header nav { float: right; } .container > header nav a { display: block; float: left; position: relative; width: 2.5em; height: 2.5em; background: #fff; border-radius: 50%; color: transparent; margin: 0 0.1em; border: 4px solid #47a3da; text-indent: -8000px; } /*-----Logo---------------*/ .logo{ width: 100%; } .wrapplogo{ position:relative; width:auto; float:left; height:52px; width: 171px; padding-top: 12px; /*margin-left: 10%;*/ } /*----------------------------Мобильный-------------------------------------------------------*/ @media screen and (max-width: 1500px) {.cbp-hrmenu > ul > li > a { padding: 1em 0.7em;}} } @media screen and (max-width: 1350px) { /*cbp-hrmenu > ul,.cbp-hrmenu .cbp-hrsub-inner {max-width: 85em !important;} .wrapplogo {width:19%;margin-left: 7px;} .cbp-hrmenu > ul > li > a { padding: 1em 1.5em;}*/ } @media screen and (max-width: 1290px) { .wrapplogo {margin-left: 7px;} .cbp-hrmenu > ul > li > a { font-size:88%; padding: 1.4em 0.5em;} } @media screen and (max-width: 1170px) { .cbp-hrmenu > ul > li > a { padding: 2em 0.3em;font-size:75%;} .wrapplogo{padding-top: 17px;} .wrapplogo{width: 141px;} } @media screen and (max-width: 1077px) { .cbp-hrmenu > ul > li > a { font-size:70%;} .wrapplogo{width: 137px;} } @media screen and (max-width: 980px) { #ulmenu{display:none; border-top: 1px solid #ffffff; background-color:#183d61; position:absolute; z-index: 9999; text-align: center; } .cbp-hrmenu > ul > li > a { font-size:100%;} .iconmenu{ display:block; position:absolute; top:11px; } .wrapplogo { width: auto; float: none !important; margin-top: 5px; display: block; margin: 0 auto !important; width:202px !important; } /*.cbp-hrmenu { font-size: 100%; border: none; }*/ .cbp-hrmenu > ul, .cbp-hrmenu .cbp-hrsub-inner { width: 100%; padding: 0; } .cbp-hrmenu .cbp-hrsub-inner { padding: 0 2em; font-size: 77%; } .cbp-hrmenu > ul > li { display: block; border-bottom: 1px solid #47a3da; } .cbp-hrmenu > ul > li > a { display: block; padding: 1em 2em; } .cbp-hrmenu .cbp-hrsub { position: relative; } .cbp-hrsub h4 { padding-top: 0.6em; } } @media screen and (max-width: 575px) { .cbp-hrmenu .cbp-hrsub-inner > div { width: 100%; float: none; padding: 0 2em; } } .open { display:block !important; } /*------------------*/ .content { display: block; /* width: 85%; */ overflow: hidden; height:100px; /* max-height: 100%; */ /* margin: 21px auto; */ margin: 0px auto; background-color: #22dd66; max-width: 750px; position: relative; color: #5d5d5d; font-family: 'Roboto', sans-serif; } <div class="container"> <div class="main"> <img src="img/icon/menu.png" class="iconmenu"> <nav id="cbp-hrmenu" class="cbp-hrmenu"> <ul id="ulmenu"><div class="wrapplogo"><a href="index.php" class="logolink"><img class="logo" src="img/logo.png"></a></div> <li> <a href="#">1</a> <div class="cbp-hrsub"> <div class="cbp-hrsub-inner"> <div> <h4></h4> <ul> <li><a href="#remont_lubouy_slojnosti" class="uslitemlink">2</a></li> <li><a href="#remont_electriki" class="uslitemlink">3</a></li> <li><a href="#computernya_diagnostika" class="uslitemlink">4</a></li> <li><a href="#ustanovka_signalizaciy" class="uslitemlink">5</a></li> </ul> </div> <div> <h4></h4> <ul> <li><a href="#malarnya_kuzovnye_rabotu" class="uslitemlink">6</a></li> <li><a href="#razval_sxojdenya" class="uslitemlink">Развал схождения</a></li> <li><a href="#vukyp_auto" class="uslitemlink">Выкуп автомобилей</a></li> <li><a href="#svarka_argonom" class="uslitemlink">Сварка аргоном</a></li> </ul> </div> <div> <h4></h4> <ul> <li><a href="#evakuacia_auto" class="uslitemlink">Эвакуация автомобиля</a></li> <li><a href="#regulirovka_sveta_far" class="uslitemlink">Регулировка света фар</a></li> <li><a href="#shinomontaj" class="uslitemlink">Услуги шиномонтажа</a></li> <li><a href="#xranenue_koles" class="uslitemlink">Хранение колес</a></li> </ul> </div> </div><!-- /cbp-hrsub-inner --> </div><!-- /cbp-hrsub --> </li> <li><a class="linkzapchasti" href="catalog.php">Автомагазин</a></li> <li><a class="linkbydetails" href="by_details.php">Б/У запчасти</a></li> <li><a class="" href="">3</a></li> <li><a class="linkourworks" href="ourworks.php">1</a></li> <li><a class="linknews" href="news.php">1</a></li> <li><a class="linkconstructor" href="constructor.php">1</a></li> <!--<li> <a href="#">Подготовка к ТО</a> <div class="cbp-hrsub"> <div class="cbp-hrsub-inner"> <div> <h4>1</h4> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> <li><a href="#">Услуга 4</a></li> </ul></div> <div><h4>2</h4> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> </ul></div> <div><h4>3</h4> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> <li><a href="#">Услуга 4</a></li> <li><a href="#">Услуга 5</a></li> <li><a href="#">Услуга 6</a></li> </ul> </div> </div> </div> </li>--> </ul> </nav> </div> </div> <div class="content">h </div> 
Source: https://ru.stackoverflow.com/questions/571650/
All Articles