Screenshot of the desired result

Hello everyone, I need help resolving the problem. I don’t understand how to make the blue circle go to the place where it is located on the screenshot. But something goes wrong with me. enter image description here

body { padding: 0; margin: 0; font-family: Arial; box-sizing: border-box; } .container { margin: 0 auto; width: 1180px; } .header { margin-top: 1572px; height: 424px; width: 100%; background-color: #f5f5f5; } .reviews { padding-top: 50px; margin-left: 46.1%; color: #445161; font-size: 30px; } .cir1 { display: block; padding-top: 25px; } .cloud1 { } .cir2 { } 
 <section> <div class="header"> <div class="container"> <div class="reviews"> Reviews </div> <img src="images/circle.png" class="cir1"> <img src="images/cloud.png" class="cloud1"> </div> </div> </section>

Here’s what comes out:

result

  • Please attach your attempt code. - Mikhail Rebrov
  • '.cir1 {display: block; padding-top: 25px; } ' - Stanislav Kozyavin
  • in the body of the question and I would like to see not one class, but the layout of the whole block - Mikhail Rebrov

2 answers 2

 .item { display: flex; align-items: center; width: 44%; } .circle { display: block; border-radius: 50%; margin-right: 20px; } .items { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; } 
 <div class="items"> <div class="item"> <img src="http://placehold.it/100" alt="" class="circle"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p> </div> <div class="item"> <img src="http://placehold.it/100" alt="" class="circle"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p> </div> <div class="item"> <img src="http://placehold.it/100" alt="" class="circle"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p> </div> <div class="item"> <img src="http://placehold.it/100" alt="" class="circle"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aut nihil dignissimos libero quod.</p> </div> </div>

  • Please try not only to attach the code, but also to explain what the idea of ​​your decision is, which the author did not take into account in his attempt, etc. It is often important not so much the actual decision itself, as its explanation. - Mikhail Rebrov

Try setting the mug and cloud for the display: inline-block property.

 .cir1, .cloud1 { display: inline-block; }