@iiideb
Пишу роботов на html

Не получается использовать стили css?

Здравствуйте, я только начинаю учиться верстке и не могу понять, почему мой header в html не имеет отступов. Я пробую через CSS но я в нем не силен, margin не работает
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Купить срубы бань во Владимире недорого</title>
</head>
<body>
	<header>
		<div class="header-logo">
			<img src="http://jakimez.ru/sites/all/themes/vladweb/img/logo.png" alt="logo">

		</div>
		<div class="header-menu">
			<nav>
				<ul>
					<li class="navigation-menu">Главная</li>
					<li class="navigation-menu">Наши Услуги</li>
					<li class="navigation-menu">Цены</li>
					<li class="navigation-menu">Контакты</li>
				</ul>
			</nav>

		</div>
		<div class="header-contacts">
			8(4922)33-56-09
			<br>info@jakimez.ru
		</div>
	</header>
	<hr>
	<div class="content">
		Строительство Домоы из срубов
		<br>
		-Высокое качество срубов
		<br>
		-Отлично держит тепло
		<br>
		-Влагоустойчивый
		<br>
		-Морозостойкость
		<br>
		-Звукоизоляция
	</div>
		<div class="price">
			Низкие цены
		</div>
		<div class="main-image">
			<img src="http://jakimez.ru/sites/all/themes/vladweb/img/banner.png" alt="">
		</div>
		<main>
			<div>
				<h1>Купить срубы домов, бань под ключ во Владимире <br>недорого</h1>
				<img src="http://jakimez.ru/sites/all/themes/vladweb/img/home_ban2.png" alt="">
				<p>Многие мечтают о собственном жилье, построенном из экологически чистых материалов. Мы готовы воплотить ваши мечты в реальность и предлагаем свои услуги по строительству домов, в качестве материала для которых используются надежные <strong>срубы</strong>. Мифы о том, что дерево легко подвергается негативным воздействиям внешних факторов и может быть поражено паразитами - давно развеяны, поскольку вся наша продукция обработанана специальными средствами, позволяющими надежно защитить <strong>срубы</strong> и улучшить их свойства.</p>
				<p>Дома из сруба отличаются долговечностью и экологичностью. Такие строения могут простоять десятки лет, не требуя при этом ремонтных работ. В таком жилище естественным путем будет поддерживаться комфортная атмосфера - летом в доме будет прохладно, а зимой будет всегда тепло. Если вы решили построить собственный дом и вам необходимы качественные срубы под ключ - обратитесь к нам.</p>
				<h2>Стадии строительства&nbsp;</h2><br>
				<p>
				Первая заключается в следующем:<br>

				создание ленточного или столбчатого фундамента;<br>
				заготовка материала;<img src="http://jakimez.ru/sites/default/files/images/m_12514821152328.jpg" alt="">
				<br>
				установление бревен на подготовленный фундамент;<br>
				устройство крыши и последующее ее покрытие рубероидом.<br>
				Когда установка срубов завершена, стоит подождать некоторое время для окончательной усадки конструкции. Если строительство проводится летом, то ждать усадки придется около одного года. В случае работ зимой, для полноценной усадки достаточно подождать всего лишь полгода. Сруб, заготовленный в зимний период, имеет некоторые преимущества - он не подвержен растрескиванию, повреждению различными микроорганизмами и гораздо быстрее усаживается. <br>

				Второй этап - установление дверей, окон, перегородок, полов, внутрення и внешняя отделка стен, а также проведение необходимых коммуникационных систем. Однако, данные работы необходимо выполнять только после полной усадки дома. Через год после установки каркаса можно приступать к внешней отделке стен - их можно обшить вагонкой, панелями, сайдингом или любыми другими отделочными материалами.</p>
			</div>
		</main>
		<aside>
			<div>
				<nav>
					<a href="#">Проекты домов</a>
					<br>
					<a href="#">Наши работы</a>
					<br>
					<a href="#">Бани из срубов</a>
					<br>
					<a href="#">Дома из срубов</a>
					<br>
					<a href="#">Коттеджи</a>
					<br>
					<a href="#">Дачи</a>
					<br>
					<a href="#">Сруб на заказ</a>
				</nav>
			</div>
		</aside>


		<aside>
			<div>
				<p>Полезные статьи</p>
			</div>
		</aside>
</body>
</html>

.header-logo{
	float: right;
	margin-left: 200px;
}

.header-menu{
	float: none;
}

.header-contacts{
	float: right;
}

Можете побаловаться с margin и padding но мне ничего не дало.
(Я хочу сверстать сайт jakimez.ru/)
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
julia_amake
@julia_amake
Front-end разработчик
Не верстайте так. Использовать float для сеток и центровать отступом слева – это плохая практика.

Чтобы расположить контент по центру, нужно не у логотипа слева отступ делать, а центровать весь header (content и т.д.). Для этого заводите специальный класс (как правило, его называют .container) и добавляете его везде, где нужно отцентровать контент. И вместо float используйте flexbox.

Например, для вашего header-а:

<header class="container">
  <div class="header-logo">
    <img src="http://jakimez.ru/sites/all/themes/vladweb/img/logo.png" alt="logo">
  </div>
  <nav class="header-menu">
    <ul>
      <li class="navigation-menu">Главная</li>
      <li class="navigation-menu">Наши Услуги</li>
      <li class="navigation-menu">Цены</li>
      <li class="navigation-menu">Контакты</li>
    </ul>
  </nav>
  <div class="header-contacts">
    8(4922)33-56-09
    <br>info@jakimez.ru
  </div>
</header>

.container {
  max-width: 1000px;
  margin: 0 auto;
}

header {
  display: flex;
  justify-content: space-between;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы