БЛОГ НА HUSL


Почему меню уходит влево при маштабировании страницы?

Автор вопроса: sashok

Почему меню уходит влево при маштабировании страницы?

body, html {
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    min-width: 1000px;
}


.main {
    text-transform: uppercase;
    display: flex;
}

.main__name {
    display: flex;
    margin-left: 143px;
    margin-top: 20px;
    max-width: 220px;
}

.main__crowdme {
    text-transform: uppercase;
    font-size: 31px;
    color: #6d6e70;
    margin-top: 2.5px;
    margin-left: 5px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.main__menu {
    margin-left: 122px;
    margin-top: 40px;
    display: flex;
}

.main__menu__text {
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    color: #adadad;
    margin-right: 30px;
}

.main__menu__text:last-child {
    margin-right: 0;
}

.main__button {
    display: block;
    margin-top: 28px;
    margin-left: 83px;
    font-size: 13px;
    color: #fff;
    background-color: #bcda5c;
    padding: 9px 25px;
    border-radius: 15px;
    line-height: 1;
}

.main__button__text {
    line-height: 18px;
}

.main__button:hover {
    color: #bcda5c;
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>CROWDME</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>

   <div class="main">
       <div class="main__name">
           <img src="%D0%B7%D0%B5%D0%BB%D1%91%D0%BD%D1%8B%D0%B5%20%D0%BF%D0%B0%D0%BB%D0%BE%D1%87%D0%BA%D0%B8.PNG" alt="зелёные палочки" wigth="34" height="37">
            <span class="main__crowdme">CROWDME</span>
       </div>

       <div class="main__menu">
            <div class="main__menu__text">home</div>
            <div class="main__menu__text">how it works</div>
            <div class="main__menu__text">discover a project</div>
            <div class="main__menu__text">blog</div>
            <div class="main__menu__text">find out more</div>
       </div>

       <div class="main__button">
            <div class="main__button__text">login</div>
       </div>
   </div>


</body>
</html>


Источник

Ответы (2 шт):

Автор решения: Александр Сычёв

Блоку main вы задали display: flex;. Но не задали justify-content. Свойство определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера. Если хотите можно сделать так:

justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.

Ниже пример

        body, html {
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    min-width: 1000px;
    box-sizing: border-box;
}


.main {
    text-transform: uppercase;
    display: flex;
    width: 1280px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
margin-top: 25px;
}

.main__name {
    display: flex;
    max-width: 220px;
}

.main__crowdme {
    text-transform: uppercase;
    font-size: 31px;
    color: #6d6e70;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.main__menu {
    display: flex;
}

.main__menu__text {
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    color: #adadad;
    margin-right: 30px;
}

.main__menu__text:last-child {
    margin-right: 0;
}

.main__button {
    display: block;
    font-size: 13px;
    color: #fff;
    background-color: #bcda5c;
    padding: 9px 25px;
    border-radius: 15px;
    line-height: 1;
}

.main__button__text {
    line-height: 18px;
}

.main__button:hover {
    color: #bcda5c;
    background-color: blue;
}
   <div class="main">
       <div class="main__name">
           <img src="%D0%B7%D0%B5%D0%BB%D1%91%D0%BD%D1%8B%D0%B5%20%D0%BF%D0%B0%D0%BB%D0%BE%D1%87%D0%BA%D0%B8.PNG" alt="зелёные палочки" wigth="34" height="37">
            <span class="main__crowdme">CROWDME</span>
       </div>

       <div class="main__menu">
            <div class="main__menu__text">home</div>
            <div class="main__menu__text">how it works</div>
            <div class="main__menu__text">discover a project</div>
            <div class="main__menu__text">blog</div>
            <div class="main__menu__text">find out more</div>
       </div>

       <div class="main__button">
            <div class="main__button__text">login</div>
       </div>
   </div>

→ Ссылка
Автор решения: Arcadiy 

body, html {
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    min-width: 1000px;
}


.main {
    text-transform: uppercase;
    display: flex;
}

.main__name {
    display: flex;
    margin-left: 143px;
    margin-top: 20px;
    max-width: 220px;
}

.main__crowdme {
    text-transform: uppercase;
    font-size: 31px;
    color: #6d6e70;
    margin-top: 2.5px;
    margin-left: 5px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.main__menu {
    margin-left: 122px;
    margin-top: 40px;
    display: flex;
}

.main__menu__text {
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    color: #adadad;
    margin-right: 30px;
}

.main__menu__text:last-child {
    margin-right: 0;
}

.main__button {
    display: block;
    margin-top: 28px;
    margin-left: 83px;
    font-size: 13px;
    color: #fff;
    background-color: #bcda5c;
    padding: 9px 25px;
    border-radius: 15px;
    line-height: 1;
}

.main__button__text {
    line-height: 18px;
}

.main__button:hover {
    color: #bcda5c;
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>CROWDME</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>

   <div class="main">
       <div class="main__name">
           <img src="%D0%B7%D0%B5%D0%BB%D1%91%D0%BD%D1%8B%D0%B5%20%D0%BF%D0%B0%D0%BB%D0%BE%D1%87%D0%BA%D0%B8.PNG" alt="зелёные палочки" wigth="34" height="37">
            <span class="main__crowdme">CROWDME</span>
       </div>

       <div class="main__menu">
            <div class="main__menu__text">home</div>
            <div class="main__menu__text">how it works</div>
            <div class="main__menu__text">discover a project</div>
            <div class="main__menu__text">blog</div>
            <div class="main__menu__text">find out more</div>
       </div>

       <div class="main__button">
            <div class="main__button__text">login</div>
       </div>
   </div>


</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.