Адаптивная вёрстка (HTML, CSS)

Question

Здравствуйте. Являюсь начинающим верстальщиком. Недавно нашёл макет для практики, начал верстать, и в ходе вёрстки наткнулся на проблему в одном блоке. Проблема в том, что когда я уменьшаю разрешение экрана, блоки смещаются (ну, так и должно быть), у меня имеется секция с классом main-section, я задал определенный background цвет для данного блока, и, если при уменьшение разрешения экрана с дургими блоками всё норм, то этот начинает слишком сильно смещаться в лево. width: 100%; - не помогает. Выручайте :) п.с. специально сделал цвет фона красным, чтобы было наглядно. https://codepen.io/Vladislav_Biryukov/pen/zYNqqWW

<!DOCTYPE html>
<html>
<head>
    <title>SendPay</title>
    
    <link rel="stylesheet" href="css/main.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;600;700&display=swap" rel="stylesheet">
</head>


<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
</style>

<body>
    <header id="header" class="header">
        <div class="container">
            <div class="nav">
                <img src="img/logo.svg" alt="logo" class="logo">
                <span class="text_logo">Sendpay</span>

                <ul class="menu">
                    <li><a href="#">send money</a></li>
                    <li><a href="#">receive money</a></li>
                    <li><a href="#" style="margin-right: 54px;">language</a></li>
                    <li><a href="#">How it works</a></li>
                </ul>

                    <div class="sign_in">
                        <a href="#">Sign in</a>
                    </div>
                    
                    <div class="register">
                        <a href="#">Register</a>
                    </div>
            </div>
        </div>
    </header>

        <section id="section-one" class="section-one">
            <div class="container">
                <div class="adaptive">
                    <div class="block-one-section">
                        <div class="nav_section_one" style="width: 420px;">
                            <span class="main-text-section-one">
                                Sending Money is<br>Easier than before
                            </span>
    
                            <div class="dash">
                                <img src="img/line.svg" alt="line">
                            </div>

                            <div class="lorem-text-one-section">
                                <p>Lorem ipsum dolor sit amet,<br>
                                 consectetur adipiscing elit. Sed sed<br>
                                 consectetur libero. Curabitur.</p>
                            </div>

                            <div class="adaptive-two">
                                <div class="register-one-section">
                                    <a href="#">Register</a>
                                </div>

                                <div class="learn-more-one-section">
                                    <a href="#">learn more</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="block-one-section-two" style="width: 509px; height: 364px;">
                        <img src="img/phone_and_people.svg" alt="photo phone and people" align="right">
                    </div>
                </div>
            </div>
        </section>

        <section id="section-two" class="section-two">
            <div class="container">
                <span>
                    How it Works
                </span>

                <div class="dash">
                    <img src="img/line.svg" alt="line">
                </div>

                <div class="lorem-text-two-section">
                    <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec porttitor.</p>
                </div>

                <div class="three-img">
                    <div class="ellipse-1">
                        <img src="img/Ellipse 1.svg" alt="Ellipse 1">
                            <div class="test1">
                                <h3 class="main-text-ellipse">In-app transer</h3>
                            </div>
                                <div class="subtext-ellipse">
                                    <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
                                </div>
                        </div>

                    <div class="ellipse-2">
                        <img src="img/Ellipse 2.svg" alt="Ellipse 2">
                            <p class="main-text-ellipse">In-app transer</p>
                                <div class="subtext-ellipse">
                                    <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
                                </div>
                        </div>

                    <div class="ellipse-3">
                        <img src="img/Ellipse 3.svg" alt="Ellipse 3">
                            <p class="main-text-ellipse">In-app transer</p>
                                <div class="subtext-ellipse">
                                    <p>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Donec p</p>
                            </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="main-block" class="main-section">
            <div class="main-block">
                    <div class="ellipse-4">
                        <img src="img/Ellipse 4.svg" alt="">
                    </div>

                    <div class="">
                        <img src="img/img-people.svg" alt="" class="img-people">
                    </div>
                </div>  
        </section>
        

        <footer id="footer" class="footer">
                <div class="container">
                    
                </div>
        </footer>
</body>
</html>




body {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    height: 3872px;
}

ul, li {
    display: block;
}

.container {
    width: 1280px;
    margin: 0 auto;
}

.logo {
    margin-right: 15px;
    margin-left: 65px;
}

.text_logo {
    font-size: 25px;
    color: #6C63FF;
    font-weight: 00;
    margin-right: 52px;
}

.menu li a {
    text-decoration: none;
    color: black;
}

.menu {
    display: flex;
}

.menu li {
    margin-right: 40px;
}

.nav {
    display: flex;
    align-items: center;
    margin-top: 35px;
}

.sign_in {
    margin-right: 14px;
}

.sign_in a {
    text-align: center;
    text-decoration: none;
    color: black;
    border: 2px solid #B7B3B3;
    padding: 10px 24px 10px 24px;
}

.register a {
    text-decoration: none;
    color: white;
    background-color: #6C63FF;
    border: 2px solid #B7B3B3;
    padding: 10px 24px 10px 24px;
}

.section-one {
    margin-top: 112px;
}

.nav_section_one {
    margin-left: 65px;
}

.main-text-section-one {
    font-size: 44px;
    font-weight: 600;
    line-height: 54px;
}

.lorem-text-one-section p {
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    opacity: 0.6;
}

.register-one-section {
    margin-top: 54px;
    width: 146px;
    height: 50px;
}

.register-one-section a {
    text-decoration: none;
    font-weight: 500;
    border: 2px solid #353434;
    padding: 15px 41px 15px 37px;
    color: white;
    background-color: #6C63FF;
}

.adaptive {
    display: flex;
}

.adaptive-two {
    display: flex;
}













.block-one-section-two {
    margin-left: 272px;
}

.learn-more-one-section {
    margin-top: 54px;
    margin-left: 20px;  
    height: 50px;
}

.learn-more-one-section a {
    color: black;
    text-decoration: none;
    font-weight: 400;
    border: 2px solid #B7B3B3;
    padding: 15px 19px 15px 18px;
}

.section-two {
    margin-left: 65px;
    margin-top: 190px;
    text-align: center;
}

.section-two span {
    font-size: 44px;
    font-weight: 600;
}

.lorem-text-two-section {
    margin-top: -10px;
}

.lorem-text-two-section p {
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    opacity: 0.6;
}

.three-img {
    display: flex;
    justify-content: center;
    margin-top: 70px;
}

.three-img .ellipse-1, .ellipse-2 {
    margin-right: 55px;
}

.main-text-ellipse {
    margin-top: 56px;
    font-size: 27px;
    font-weight: 700;
}

.subtext-ellipse p {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 600;
    line-height: 17px;
    margin-top: -15px;
}

.main-block {
    height: 580px;
    margin-top: 160px;
    /* background-color: #FFFCFC; */
    background-color: red;
}

.ellipse-4 img{
    margin-top: -20px;
    position: absolute;
}

.img-people {
    margin-left: 65px;
    margin-top: 109px;
    position: absolute;
}

БЛОГ НА HUSL

Адаптивная вёрстка (HTML, CSS)

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