Problem with Column-Gap

Question

Good night. I’m having a problem in my CSS.. I need to create two columns, one of text, and the other with image, however the columns don’t play along (CSS error, but I can’t fix it);

Follow the line of the code:

HTML:

<section class="section-a">
    <div class="container">
        <div>
            <h1>Esse é o smartphone que mudará a história da fotografia.</h1>
            <p>
            Conheça o Galaxy S20, o S20+ e o S20 Ultra. Eles contam com o revolucionário 8K Video Snap, que muda a forma como você grava vídeos e tira fotos.1 Com a segurança do Samsung Knox, uma bateria inteligente, um processador poderoso e um espaço de armazenamento enorme, os 3 modelos do Galaxy S20 revelam um novo mundo para os smartphones.
            </p>
            <a href="#" class="btn">Leia Mais</a>
            <div>
            <img src="images/s20.png" alt="Logo">
            </div>
        </div>
    </div>

CSS:

.section-a .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 3em;
align-items: center;
justify-content: center;

Answer 1

Your div that contains the image is inside the one that should be positioned on the left. It should be inside the class. container, but must be sister of the div to which will be next. Follow code changed:

.section-a .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5em;
  align-items: center;
  justify-content: center;
}

<section class="section-a">
    <div class="container">
        <div class="coluna-1">
            <h1>Esse é o smartphone que mudará a história da fotografia.</h1>
            <p>
            Conheça o Galaxy S20, o S20+ e o S20 Ultra. Eles contam com o revolucionário 8K Video Snap, que muda a forma como você grava vídeos e tira fotos.1 Com a segurança do Samsung Knox, uma bateria inteligente, um processador poderoso e um espaço de armazenamento enorme, os 3 modelos do Galaxy S20 revelam um novo mundo para os smartphones.
            </p>
            <a href="#" class="btn">Leia Mais</a>
        </div>
        <div class="coluna-2">
          <img src="images/s20.png" alt="Logo">
        </div>
    </div>