Change the markup (method through float)
The fact is that float: right; "draws" elements from the last one, so that the element is displayed last, you need to make it be the first with `float: right;":
.header-up { height: 44px; font-family: Roboto; margin: 0 auto; width: 1200px; } body background { width: 100%; } body { margin: 0; font-family: Roboto; } .header-up a { text-decoration: underline; color: #ffffff; } #header1 { display: inline-block; font-size: 15px; margin-top: 12px; overflow: hidden; } .header2-up { background-color: #285023; } .header-up img { margin-right: 10px; } #chelovek { padding-left: 10px; margin-left: 20px; border-left: 1px #ffffff solid; } #login { float: right; display: inline-block; margin-top: 12px; margin-right: 20px; } .headerlogo { width: 1200px; margin: 0 auto; height: 100px; } #signin { display: inline-block; float: right; margin-top: 12px; } #logotype { float: left; margin-top: 30px; } #tovari { font-size: 15px; color: #666; float: left; margin-top: 30px; margin-left: 25px; } #vremya { float: left; margin-top: 30px; margin-left: 100px; } #vremyaraboti { font-size: 12px; color: #666; float: right; } #telefon { font-size: 22px; } #zakazat { float: left; margin-top: 30px; margin-left: 50px; } #korzina { float: right; width: 109px; margin-top: 30px; } #korzinatext { float: right; color: #363636; text-decoration: none; text-transform: uppercase; font-size: 16px; font-weight: 700; } #summa { float: right; position: relative; margin-top: -18px; color: #666; font-size: 15px; margin-right: 13px; } .menu { float: left; font-size: 15px; text-transform: uppercase; border-right: 1px solid #cfcece; margin: 13px 13px 13px 0; padding-right: 14px; } .menu-right2 a:hover { color: #a0821e; text-decoration: none; } .menu-right2 a { color: #363636; } .menu-right2 { float: right; font-size: 15px; text-transform: uppercase; margin: 13px; } .menu-right { float: right; font-size: 15px; text-transform: uppercase; border-right: 1px solid #cfcece; margin: 13px; } .menu a { color: #363636; } .menu-right a { color: #363636; } .menu a:hover { color: #a0821e; text-decoration: none; } .menu-right a:hover { color: #a0821e; text-decoration: none; } .menu1 { float: left; font-size: 15px; text-transform: uppercase; margin: 13px 13px 13px 0; } .menu1 a:hover { color: #a0821e; text-decoration: none; }1 .menu1 a { color: #363636; }
<div class="header2-up"> <div class="header-up"> <img src="images/Shesterenka.png" id="sheterenka"></img><span id="header1"><a href="#">Служба поддержки</a></span> <img src="images/chelovek.png" id="chelovek"></img><span id="header1"><a href="#">Вакансии</a></span> <span id="signin"><a href="#">Зарегестрироваться</a></span> <span id="login"><a href="#">Войти</a></span> </div> </div> <div class="headerlogo"> <div id="logo"> <a href="#" id="logotype"> <img src="images/logo.png" /> </a><span id="tovari">Товары из Вьетнама<br/>от производителей</span> </div> <div id="vremya"><span id="vremyaraboti">ПН-ВС: 10:00 - 21:00</span> <br/><span id="telefon">+7 (495) 989-72-68</span> </div> <div id="zakazat"> <a href="#"> <img src="images/zakazat.png" /> </a> </div> <div id="korzina"> <img src="images/korzina.png" /><a href="#" id="korzinatext">Корзина</a><span id="summa">35 560 р.</span> </div> </div> <div id="header-down-backg"> <div class="menu2"> <div class="menu"><a href="#">Продукты питания</a> </div> <div class="menu"><a href="#">Мебель</a> </div> <div class="menu"><a href="#">Керамика</a> </div> <div class="menu"><a href="#">Одежда</a> </div> <div class="menu"><a href="#">Обувь</a> </div> <div class="menu1"><a href="#">Сувениры</a> </div> <div class="menu-right2"><a href="#">Контакты</a> </div> <div class="menu-right"><a href="#">Доставка</a> </div> <div class="menu-right"><a href="#">О компании</a> </div> </div> </div>
More flexible way (flexbox)
You can make it so that the elements could not be interchanged in the markup.
Add a display: flex container and margin-left: auto; for the item that starts the right menu.
Then it will not be necessary to invert the order of elements in the markup. This adds the ability to change the order of elements using the order property.
Flexbox does not need float , so they will be ignored.
For this case, you can do this:
.menu1 + .menu-right { margin-left: auto; }
But perhaps it would be better to add through the class than to check the elements for their proximity.
Full example:
.header-up { height: 44px; font-family: Roboto; margin: 0 auto; width: 1200px; } body background { width: 100%; } body { margin: 0; font-family: Roboto; } .header-up a { text-decoration: underline; color: #ffffff; } #header1 { display: inline-block; font-size: 15px; margin-top: 12px; overflow: hidden; } .header2-up { background-color: #285023; } .header-up img { margin-right: 10px; } #chelovek { padding-left: 10px; margin-left: 20px; border-left: 1px #ffffff solid; } #login { float: right; display: inline-block; margin-top: 12px; margin-right: 20px; } .headerlogo { width: 1200px; margin: 0 auto; height: 100px; } #signin { display: inline-block; float: right; margin-top: 12px; } #logotype { float: left; margin-top: 30px; } #tovari { font-size: 15px; color: #666; float: left; margin-top: 30px; margin-left: 25px; } #vremya { float: left; margin-top: 30px; margin-left: 100px; } #vremyaraboti { font-size: 12px; color: #666; float: right; } #telefon { font-size: 22px; } #zakazat { float: left; margin-top: 30px; margin-left: 50px; } #korzina { float: right; width: 109px; margin-top: 30px; } #korzinatext { float: right; color: #363636; text-decoration: none; text-transform: uppercase; font-size: 16px; font-weight: 700; } #summa { float: right; position: relative; margin-top: -18px; color: #666; font-size: 15px; margin-right: 13px; } .menu { float: left; font-size: 15px; text-transform: uppercase; border-right: 1px solid #cfcece; margin: 13px 13px 13px 0; padding-right: 14px; } .menu-right2 a:hover { color: #a0821e; text-decoration: none; } .menu-right2 a { color: #363636; } .menu-right2 { float: right; font-size: 15px; text-transform: uppercase; margin: 13px; } .menu-right { float: right; font-size: 15px; text-transform: uppercase; border-right: 1px solid #cfcece; margin: 13px; } .menu a { color: #363636; } .menu-right a { color: #363636; } .menu a:hover { color: #a0821e; text-decoration: none; } .menu-right a:hover { color: #a0821e; text-decoration: none; } .menu1 { float: left; font-size: 15px; text-transform: uppercase; margin: 13px 13px 13px 0; } .menu1 a:hover { color: #a0821e; text-decoration: none; } .menu1 a { color: #363636; } .menu2 { display: flex; } .menu1 + .menu-right { margin-left: auto; }
<div class="header2-up"> <div class="header-up"> <img src="images/Shesterenka.png" id="sheterenka"></img><span id="header1"><a href="#">Служба поддержки</a></span> <img src="images/chelovek.png" id="chelovek"></img><span id="header1"><a href="#">Вакансии</a></span> <span id="signin"><a href="#">Зарегестрироваться</a></span> <span id="login"><a href="#">Войти</a></span> </div> </div> <div class="headerlogo"> <div id="logo"> <a href="#" id="logotype"> <img src="images/logo.png" /> </a><span id="tovari">Товары из Вьетнама<br/>от производителей</span> </div> <div id="vremya"><span id="vremyaraboti">ПН-ВС: 10:00 - 21:00</span> <br/><span id="telefon">+7 (495) 989-72-68</span> </div> <div id="zakazat"> <a href="#"> <img src="images/zakazat.png" /> </a> </div> <div id="korzina"> <img src="images/korzina.png" /><a href="#" id="korzinatext">Корзина</a><span id="summa">35 560 р.</span> </div> </div> <div id="header-down-backg"> <div class="menu2"> <div class="menu"><a href="#">Продукты питания</a> </div> <div class="menu"><a href="#">Мебель</a> </div> <div class="menu"><a href="#">Керамика</a> </div> <div class="menu"><a href="#">Одежда</a> </div> <div class="menu"><a href="#">Обувь</a> </div> <div class="menu1"><a href="#">Сувениры</a> </div> <div class="menu-right"><a href="#">Доставка</a> </div> <div class="menu-right"><a href="#">О компании</a> </div> <div class="menu-right2"><a href="#">Контакты</a> </div> </div> </div>
