Привет. Новичок в этой теме. Есть сайт на Тильде, хочу перенести его на чистый HTML + CSS. Сейчас столкнулся с небольшой проблемой, как нормально расположить элементы в Header, чтобы логотип и контакты были на одном уровне? Насколько я понимаю мешает Margin, но без него логотип не получается поставить по середине. Если поместить контакты и логотип в один див, тогда не получается расположить контакты по бокам. Посмотрев в интернете понял что делают в основном логотип с боку, и без контактов.
Вот исходник:
Вот на HTML:
Код:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap"
rel="stylesheet">
<title>Shov.kz</title>
</head>
<body>
<header class="header">
<div class="container">
<h2 class="contacts">+7 777 777 7777</h2>
<h2 class="contacts">test@gmail.com</h2>
<a class="social" href="https://www.instagram.com"><img src="assets/Images/Instagram_logo1.png" alt="instagram"></a>
<a class="social" href="https://wa.me/87777777777"><img src="assets/Images/WhatsApp_logo1.png" alt="WhatsApp"></a>
<div class="header__inner">
<div class="header__logo">
<img src="assets/Images/Shov_Logo3.png" alt="логотип">
</div>
<nav class="nav">
<a class="nav__link" href="##">КАТАЛОГ</a>
<a class="nav__link" href="##">О НАС</a>
<a class="nav__link" href="##">ДОСТАВКА</a>
<a class="nav__link" href="##">КОНТАКТЫ</a>
</nav>
</div>
</div>
</header>
</body>
</html>
body{
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
*,
*::before,
*::after{
box-sizing: border-box;
}
.container{
width: 100%;
max-width: 1165px;
margin: 0 auto;
}
.header{
padding: 45px 0px 70px 0px;
}
.header__inner{
position: relative;
width: 400px;
margin: 0 auto;
}
.contacts{
/*text-align: */
margin-left: 80%;
}
.nav__link{
color: black;
text-decoration: none;
font-size: 20px;
}
Простой
