Как перетащить элементы так, как показано на скриншоте?

Question

[Бержан Алишер]

Недавно решился заняться вёрсткой, и столкнулся с проблемой, что не могу правильно расположить элементы.
Пожалуйста, кто может, посоветуйте как сделать их также, как на PSD макете.
На 1 скрине: моя работа На 2 скрине: то, чего я хочу достигнуть


Если нужно, то вот CSS код:
body {
font-family: "Open Sans Bold", "Open Sans Extrabold", "Open Sans Italic", "Open Sans Semibold", "Open Sans", sans-serif;
}
.clearfix:after {
content: "";
display: table;
width: 100%;
clear: both;
}
.dark_rectangle {
margin-left: 162px;
margin-top: 30px;
}
.menu {
padding: 0;
margin: 0;
display: block;
}
.menu li {
float: left;
display: block;
margin-right: 46px;
}
.menu a {
color: #706f6f;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}

Comments

[iBird Rose]

тут css недостаточно. скинь полную верстку на https://jsfiddle.net/

[Ankhena]

font-family: "Open Sans Bold", "Open Sans Extrabold", "Open Sans Italic", "Open Sans Semibold", "Open Sans", sans-serif;

Вы хорошо понимаете, что пишете?
Если нет жирного, отрисовывай курсивом?
Довольно странно.

Но дело даже не в этом, название шрифта "Open Sans", а про жирность пишется в свойстве font-weight, а курсе в свойстве font-style

float: left; и clearfix:after

Это не то, чтобы из прошлого века, но близко к тому.
В современном мире для сеток используются flex или grid

Сейчас вы показали только стили, да и то явно не все.
Но чтобы узнать, что у вас там еще не так, нужен весь код, касающийся этого меню оформленный в песочницу типа jsfiddle.net

Одна из вариаций: https://jsfiddle.net/b5fro8Lq/

[WapSter]

Действительно, откуда ты float откопал. Уже даже легаси на флексах.

[Бержан Алишер]

WapSter, с ютуба смотрел видос, вот и подумал, что поможет

[Бержан Алишер]

Ankhena, Благодарю! Учту данный совет

Answer 1

[WapSter]

Comments

[Бержан Алишер]

Спасибо!