Как поместить в левую сторону логотип, а в правую сторону контакты, но при этом, что бы сохранился margin при изменение масштаба страницы?

Question

       HTML

 <!DOCTYPE html>
        <html lang="ru">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="style.css">
            <title>Главная</title>
        </head>
        <body>
            <header class="header">
                <div class="logo">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="text">
                    <div class="con1">
                        <p class="text12">По вопросам и предложениям</p>
                        <a href="mailto:[email protected]">[email protected]</a>
                    </div>
                    <div class="con2">
                        <p class="text12">Для консультацией</p>
                        <a href="tel:#">+737319239123</a>
                    </div>    
                </div>
                
            </header>
        </body>
        </html>
    
   CSS

 body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        min-width: 100%;
        margin-left: 130px;
        margin-right: 130px;
    }
    
    .header {
    
        width: 1180px;
        margin-top: 32px;
        display: flex;
    }
    
    .logo {
        width: 180px;
        height: 38px;
        
    }

Answer 1

При помощи display: grid или display: flex это делается. а отступ даётся параметром gap.
При сужении .header можете проверить, отступ не будет уменьшаться.

img {
  width: 150px;
  height: 150px;
  display: block;
  background-color: black;
}

.header {
  display: grid;
  grid-template-columns: 150px auto;
  column-gap: 30px;
  align-items: center;
}
.text {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

<header class="header">
    <div class="logo">
        <img src="img/logo.png" alt="">
    </div>
    <div class="text">
        <div class="con1">
            <p class="text12">По вопросам и предложениям</p>
            <a href="mailto:[email protected]">[email protected]</a>
        </div>
        <div class="con2">
            <p class="text12">Для консультацией</p>
            <a href="tel:#">+737319239123</a>
        </div>    
    </div>
</header>

БЛОГ НА HUSL

Как поместить в левую сторону логотип, а в правую сторону контакты, но при этом, что бы сохранился margin при изменение масштаба страницы?

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