Нужна помощь по верстке макета

Общее
1

Здравствуйте, можете подсказать как реализовать данную шапку.

Header%20copy
Header copy.png1920×72 74.4 KB

Не понимаю как позиционировать объекты.

  • {
    padding: 0;
    margin: 0;
    }
    body {
    font-family: ‘Open Sans’, sans-serif;
    }
    /HEADER BEGIN/
    .logo {
    float: left;
    }
    ul {
    text-align: center;
    margin-right: 100px;
    }
    li {
    list-style: none;
    text-decoration: none;
    font-size: 13px;
    }
    nav li{
    display:inline-block;
    margin: 32px 20px;
    color: #fff;

}
.site-nav{
background-image: url(BG.png);
height: 72px;
}

		/*HEADER ENDS*/

и вышло вот это “чудо”
http://joxi.ru/L213Bbni85BBXr

2

Опубликуйте код через песочницу, пожалуйста.

4

5

У вас есть div.container, который можно использовать в качестве центровщика.
Например:

.container {
width: 500px;
margin: 0 auto;
}

То есть пока вы не задали ширину контейнеру и не отцентрировали его, всё, что находится внутри, будет позиционироваться от самого края.

6

Спасибо. И еще один вопрос когда задаю позиционирование логотипу смещается и текст, не пойму как это обойти

7

Не понимаю, что вы имеете в виду. Уточните.

8

задаю margin-left: 361px; логотипу (именно такой отступ от края в макете) текст тоже смещается. Понимаю что вопрос глупый, но как его загуглить я не пойму

9

Если вы учли рекомендацию по поводу центровщика, то 361px быть уже не может.

10

Вот хоть убейте не понимаю.

.container {
width: 1920px;
margin: 0 auto;

}

задал ширину 1920 по макету, но вот как отцентировать его что бы начиналось не от края не понимаю. Это тема “Позиционирование” в курсах?

11

Это курс “Сетки” будет. Ширина центровщика должна быть меньше общей ширины макета, иначе для автоматических отступов не остается места.

12

Здравствуйте еще раз, вновь застопорился с этим же макетом. Мне уже стыдно писать по таким глупым вопросам, но к сожалению на других форумах отвечают неделю +. Так вот опять проблема с центрированием.
Как должно быть: http://joxi.ru/v297YljI37ZJXr
То что имею: http://joxi.ru/n2YYJ5KhoMbaD2
https://codepen.io/STRL7/pen/xQgyKg Вот код

13

А text-align: center; для заголовка не будет достаточно?