Как вывести одну сторону блока за контейнер при этом сохранить другую сторону

Question

я новичок в веб-дизайне и у меня возникла проблема. В макете в header нужно что-бы левая часть находилась на уровне с контейнером а правая выходила. Думаю понятнее будет на скрине

Код который у меня есть

<html lang="ru">
<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" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://kit.fontawesome.com/d91326b3c8.js" crossorigin="anonymous"></script>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <title>Duhoot</title>
</head>
<body>
    
    <header class="header">
        <div class="container">
            <div class="header__inner">
                <img src="assets/img/header/logo.png" alt="" class="header__logo">

                <nav class="nav">
                    <a href="" class="nav__link">Reality</a>
                    <a href="" class="nav__link">Living</a>
                    <a href="" class="nav__link">EduCation</a>
                    <a href="" class="nav__link">Entertainment</a>
                    <a href="" class="nav__link">Mobility</a>
                </nav>


                <div class="header__btns">
                    <a class="header__search" href="#"><i class="fas fa-search"></i></a>

                    <div class="header__login">
                        <i class="fas fa-user header__login__icon"></i>
                        <div class="header__login__text">login</div>
                    </div>
                </div>

            </div>
        </div>
    </header>

</body>
</html>

/* 
    font-family: "Gotham", sans-serif;
*/

body {
    color: #fff;
    font-family: "Gotham", sans-serif;
    font-weight: 400;
    font-size: 14px;
    background-color: #222222;
}



.container {
    max-width: 980px;
    position: relative;
}

/* Header */


.header {
    background-color: #fff;
}

.header__inner {
    display: flex;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 15px;
    justify-content: space-between;
}


/* Nav */

.nav__link {
    text-transform: uppercase;
    color: #96a6a7;
    text-decoration: none;
}

.header__login {
    background-color: #e94e38;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.header__search {
    background-color: #e2dee0;
    color: #fff;
}

.header__login__text {
    text-transform: uppercase;
}

.header__login__icon {
    color: #fff;
}

Проблема в том что bg кнопки login должен выходить за контейнер. Пытался прижимать контейнер к правому краю и позиционировать абсолютно но не смог.

Answer 1

Ох руки поотрывать бы таким дизайнерам.

Попытался сделать ,что-то подобное у меня получился такой вот код. Сомневаюсь, что есть какой-то другой способ.

body{
  padding:0;
  margin:0;
}
header{
  max-width:calc((100% - 400px)/2 + 400px  );
  margin-left:auto;
  background-color:#cccccc;
  display:flex;
  
}
div{
   width:100%;
   height:40px;
}
#div1{
  background-color:#cc00aa;
}
#div2{
  background-color:#aacc00;
}
#div3{
  background-color:#00ccaa;
}

<body>
  <header>
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
  </header>
</body>

Вместо 400px вставляйте свой размер контейнера

БЛОГ НА HUSL

Как вывести одну сторону блока за контейнер при этом сохранить другую сторону

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