cssの解除　background-image

模写コーディングをしているものです。background-imageがcontainerによって狭くなっているので、これを画面いっぱいに表示させたいと思っています。cssを解除する方法をいろいろ探してみたのですがだめでした。なんとかcssの変更だけで改善できないでしょうか

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/style.css">
    <title>flamingo 模写</title>
</head>
<body>
    <main>
        <div class="container">
            <div class="main-bg">
                <div class="login-button">
                    <button>ログイン・新規登録</button>
                </div>
                <div class="main-img">
                    <img src="/img/title_logo.png" alt="">
                </div>
                <div class="logo-text">
                    <p><span>8200</span>以上の先生から選べる</p>
                </div>
                <div class="search">
                    <p>学びたい言語は？</p>
                    <button>先生を探す</button>
                </div>
            </div>
            <div class="application">
                <p>アプリで予約がもっと便利に</p>
                <img src="/img/download_on_the_App_Store.png" alt="app store" class="app-store">
                <img src="/img/download_on_the_Google_Play.png" alt="google play" class="google-play">
            </div>
        </div>
    </main>
</body>
</html>

scss
body {
    font-family: "Avenir Next", "Hiragino Sans", verdana, arial, helvetica, sans-serif;
}

.container {
    width: 896px;
    max-width: 100%;
    margin: 0 auto;
}

main {
    text-align: center;
    .main-bg {
        background-image: url(/img/background_pc.png);
        background-size: 1250px;
        background-position-y: -129px;
        background-position-x: -178px;
        .login-button {
            padding: 21px;
            text-align: right;
    
            button {
                display: inline-block;
                padding: 15px 26px;
                border: 1px solid rgb(255, 103, 97);
                border-radius: 20px;
                font-size: 12px;
                color: rgb(255, 103, 97);
                background-color: white;
            }
    
            button:hover {
                background-color: lightsalmon;
            }
        }
    
        .main-img {
            padding-top: 100px;
    
            img {
                width: 343px;
                height: 139px;
            }
        }
    
        .logo-text {
            p {
                font-size: 13px;
                padding: 15px 0;
                letter-spacing: 5px;
                span {
                    font-size: 20px;
                }
            }
        }
    
        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 38px 0;
            button {
                display: inline-block;
                padding: 15px 32px;
                border: 1px solid #ff6761;
                border-radius: 26px;
                font-size: 15px;
                color: #ffffff;
                background-color: #ff6761;
            }
        }
    }
    .application {
        display: flex;
        align-items: center;
        justify-content: center;
        p {
            padding: 50px;
            font-size: 8px;
        }
        img {
            width: 120px;
            height: 36px;
        }
        .google-play {
            padding-left: 8px;
        }
    }
}

行動規範の内容に同意します

回答3件

自己解決

main .container {
width: 100%;
}

を.containerより下に指定したことで解決しました！回答してくださったお二方ありがとうございました。

投稿2020/12/24 11:14

aoi68

総合スコア9

こんにちは。

模写なのですから、模写元のコードを丸写しすればいいと思いますよ。
フラミンゴふらっとみんなで語学

scss
1    .main-bg {
2        &:before {
3            content: "";
4            background: rgba(0, 0, 0, 0) url("https://d2lcno4b1swcva.cloudfront.net/top/background_pc.png") no-repeat scroll 50% -231px / 1452px;
5            position: absolute;
6            inset: 0px;
7            z-index: -1;
8        }