Вынесение изображение за пределы контейнера

Question

мне необходимо вынести изображение за пределы контейнера, чтобы backgroung был растянут на всю ширину экрана, а текст был в контейнере. HTML:

<!DOCTYPE html>
<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">
    <title>Belzer design - дизайн-студия</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-section">
                <div class="header-item header-logo">
                    Belzer<br>Design
                </div>
                <div class="header-item"><a href="">Главная</a></div>
                <div class="header-item"><a href="">Цены</a></div>
                <div class="header-item"><a href="">Портфолио</a></div>
                <div class="header-item"><a href="">О заказе</a></div>
                <div class="header-item"><a href="">Об оплате</a></div>
                <div class="header-item-2"><a href="">О нас</a></div>
            </div>
        </div>        
    </div>
</body>
</html>

CSS(SCSS):

@font-face {
    font-family: 'Grtsk Tera';
    src: url('fonts/GrtksTera/GrtskTera-Semibold.woff2'),
    url('fonts/GrtksTera/GrtskTera-Semibold.woff');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Grtsk Tera';
    src: url('fonts/GrtksTera/GrtskTera-Bold.woff2'),
    url('fonts/GrtksTera/GrtskTera-Bold.woff');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

body {
    font-family: 'Grtsk Tera', serif;
}

.container {
    max-width: 1110px;
    margin: 0 auto;
}

a{
    color: #fff;
    text-decoration: none;
}

.header {
    display: flex;
    justify-content: space-between;
    background-image: url('/img/header.png');
    background-repeat: no-repeat;
    overflow:visible;
    padding: 8px 0px 8px;
    color: #fff;
    &-section {
        display: flex;
        align-items: center;
    }
    &-item {
        font-weight: bold;
        margin-right: 75px;
        margin-left: 5px;
        &-2 {
            font-weight: bold;
            :hover {
                transition: 0.5s;
                color: #E0E0E0;
            }
        }
        :hover {
            transition: 0.5s;
            color: #E0E0E0;
        }
    }
    &-logo {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 18px;
    }
}

Как это должно выглядеть (Ширина header 60px):

БЛОГ НА HUSL

Вынесение изображение за пределы контейнера

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