Когда я говорю «плавать вправо», мое изображение уходит слишком далеко вправо и появляется полоса прокрутки

Question

Когда я говорю «плавать»: правильно; мое изображение уходит слишком далеко вправо, и появляется горизонтальная полоса прокрутки. Как сделать так, чтобы изображение доходило только до края страницы? Вот как это выглядит: https://i.stack.imgur.com/WOU4Z.png Я хочу, чтобы это выглядело так: https://i.stack.imgur.com/tlVxo.png. Я использовал код css:

.main-img { 
width: 273px; 
float: right; 
}

HTML код, который я использовал:

<div class="main-section">
    <div class="right-column-main">
        <div class="main-img">
            <img src="../Final/images/Pictureofwebsite.JPG" alt="Website Image">
        </div>
    </div>
    <div class="left-column-main">
        <div class="heading-one">
            <h1>CodePen is a <strong>social development environment</strong> for front-end designers and developers.?</h1>
        </div>

        <div class="heading-two">
            <h2>It's the best place to build and deploy a website, show off you work, build test cases, and find inspiration.</h2>
        </div>

        <div class="center-btn-group">
            <button class="sign-up">Sign Up for Free</button>
            <button class="learn-more">Learn More</button>
        </div>
    </div>
</div>

Answer 1

О, вам просто нужно использовать flexbox. Это полезно. Сделайте что-нибудь вроде body{display:flex;}, а затем поставьте img последним.

Не стесняйтесь спрашивать больше. Я признаю, объяснение вверху действительно Blury.