I can't position the img next to the p-CodePudding

<section >
            <div >
                 <h2>Authentic. Awesome</h2>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
                <img src="images/food.jpg" alt="bowl">
            </div>
        </section>

section.authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
    }

The page shows that the columns are divided into two but the image isn't placed on the second column but instead, below the paragraph.

I tried putting a

float: right;

under .authentic img but it didn't do anything.

I also tried altering the rows in hopes of only getting one row of block but nothing happened.

CodePudding user response：

The authentic section only has one child so the grid-template-columns: repeat(2, 50%) not working here. It will need two child to divide them into two columns.

You need to move the image outside of right-col so that it works as different columns.

section.authentic {
        display: grid;
        grid-template-columns: repeat(2, 50%);
    }

<section >
            <div >
                 <h2>Authentic. Awesome</h2>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
            </div>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_0hG64Numx1G5C_2yl63NChKDzfO-o6Fo3g&usqp=CAU" alt="bowl">
        </section>