0

Как растянуть 2 элемента хэдера на всю страницу, примерно в соотношении 30/70, как на картинке

введите сюда описание изображения

введите сюда описание изображения

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    background: url(img/main-bg.png);
    background-repeat: repeat;
}

.header{
    display: flex;
    align-items: center;
    background-color: darkgrey;
    padding-bottom: 70px;
    justify-content: center;
}



.header a, h2{
    color: white;
    font-family: sans-serif;

}

.menu{
    display: flex;
    background-color: #353533;
    justify-content: space-between;
}

.logo{
    background-color: #f26c4f;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <title>Document</title>
</head>
<body>

    <div class="mainbody">
        <div class="header">
            <div class="logo"><h2>Creative</h2></div>
            <div class="menu">
                <a href="#">Articles</a>
                <a href="#">Tutorials</a>
                <a href="#">design</a>
                <a href="#">web design</a>
                <a href="#">other</a>
                <a href="#">contact</a>
            </div>
        </div>
    </div>
    
</body>
</html>

1 ответ 1

0

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    background: url(img/main-bg.png);
    background-repeat: repeat;
}

.header{
    display: flex;
    align-items: center;
    background-color: darkgrey;
    padding-bottom: 70px;
    justify-content: center;
}



.header a, h2{
    color: white;
    font-family: sans-serif;

}

.menu{
    display: flex;
    background-color: #353533;
  gap: 20px;
  width: 70%;
}

.logo{
    background-color: #f26c4f;
  width: 30%;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <title>Document</title>
</head>
<body>

    <div class="mainbody">
        <div class="header">
            <div class="logo"><h2>Creative</h2></div>
            <div class="menu">
                <a href="#">Articles</a>
                <a href="#">Tutorials</a>
                <a href="#">design</a>
                <a href="#">web design</a>
                <a href="#">other</a>
                <a href="#">contact</a>
            </div>
        </div>
    </div>
    
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.