Проблема с изображением не переходит в следующий столбец при изменении размера

Question

Новичок в программировании, и этот издавал меня. При изменении размера браузера изображение не будет go на следующей строке после класса .text, а скорее превысит страницу и перейдет вправо. Вот соответствующие html и css:

    main{
        display: flex;
        position: relative;
        justify-content: space-between;
    }


    #image{
        height: 80vh;
        box-shadow: 8px 3px 10px gray;
        margin: 10px;
        border-radius: 1%;
    }

    .text{
        animation: fade-in;
        animation-duration: 2s;
        margin-left: 20px;
        padding-left: 40px;
        margin-right: 10px;
        padding-bottom: 20px;
        margin-bottom: 20px;

    @media screen and (max-width: 500px){
        .main{
            position: static;
            flex-direction: column;
            box-sizing: unset;
        }

        #image{
            display: block;
            position: static;        
        }
 

 <main>
        <div class="text">
            <h1></h1>
            <p></p>
            <p></p>
            <button </button>
            <button </button>
        </div>

        <img id="image" src="/images/image1.jpg" alt="">  
    </main>
    

Answer 1

Вам нужно> flex-wrap: wrap для main элемента. Потому что по умолчанию display: flex работает так, как будто все дочерние элементы помещаются в один ряд, не позволяя им переноситься до тех пор, пока вы не укажете это.

Кроме того, для @media screen вы написали .main и его должно быть просто основным, потому что это не класс.

Answer 2

В вашем медиа-запросе вы выбрали основной тег .main, но это не класс. Пожалуйста, выберите это так: main {}