Can't align my div to the right after in a fixed height and width

Issue

I'm having trouble trying to make an image with an anchor, like a next and previous button with a round colored background, using only CSS. I want to put one image on the left, and the other on the right of the page.

The image on the left work itself just fine, but the image I want to put on the right, is displayed in a new block and also to the left of the page.

The code is something like this

  main div.voltar {
  text-align: left;
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}

main div.proximo {
  height: 52px;
  width: 52px;
  text-align: right;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);

<main>
  <div class="voltar">
    <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
  </div>
  <div class="proximo">
    <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
  </div>
</main>

Where is the mistake?

Solution

Because <div> elements are block elements and extend to 100% width by default. You can change that, but taking a step back there's a much simpler approach.

Don't manually position what Flexbox can position for you. Just set the container to display: flex; and justify its content with space-between:

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

main div.voltar {
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%; 
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}
   
main div.proximo {
  height: 52px;
  width: 52px;  
  background-color: #D9C2A7; 
  border-radius: 50%; 
  padding: 3px;    
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288); 
}

<main>
  <div class="voltar">
    <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
  </div>
  <div class="proximo">
    <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
  </div>
</main>

---

Edit: If you don't want to change the display for <main> then just wrap the target elements in a container that can be used for Flexbox:

main div.wrapper {
  display: flex;
  justify-content: space-between;
}

main div.voltar {
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%; 
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}
   
main div.proximo {
  height: 52px;
  width: 52px;  
  background-color: #D9C2A7; 
  border-radius: 50%; 
  padding: 3px;    
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288); 
}

<main>
  <div class="wrapper">
    <div class="voltar">
      <abbr title="Página dos desafios"><a href="../index.html" target="self" rel="prev"><img src="../imagens/volta.png"></a></abbr>
    </div>
    <div class="proximo">
      <abbr title="Módulo 2"><a href="../modulo-2/modulo2.html" target="_self" rel="next" class="proximo"><img src="../imagens/frente.png"></a></abbr>
    </div>
  </div>
</main>

Answered By - David