I can not align the text to be like in the picture. Please tell me how to do this?

.infr-block { padding-top: 70px; float: left; } .infr-block-obj { width: 370px; } .infr-block-obj:nth-child(1) { padding-left: 130px; } .infr-block-obj h1 { font-size: 19px; font-weight: bold; color: #000; } .infr-block-obj p { font-size: 16px; font-weight: lighter; width: 320px; padding-top: 20px; } .shadow { padding-top: 17px; } 
 <div class="infr-block"> <div class="infr-block-obj"> <h1>Социальные объекты</h1> <img class="shadow" src="img/shadow.png" alt=""> <p>Волга: 350м, центральный пляж: 900м</p> <p>Авто парковка 5м.</p> <p>Игровая детская площадка 2м.</p> <p>4 продуктовых магазина в пределах 500м.</p> <p>Центр города: 4км.</p> <p>Почта 150007: 600м.</p> </div> </div>

enter image description here

  • Yes, everything is fine, that's leveled ... - entithat

2 answers 2

Do you as noticed by @humster_spb padding-left on the first element i. on .infr-block-obj more information about the pseudo :nth-child( <nth> [ of <selector># ]? ) can be read on MDN

 .infr-block { padding-top: 70px; float: left; } .infr-block-obj { width: 370px; } .infr-block-obj h1 { font-size: 19px; font-weight: bold; color: #000; } .infr-block-obj p { font-size: 16px; font-weight: lighter; width: 320px; padding-top: 20px; } .shadow { padding-top: 17px; } 
 <div class="infr-block"> <div class="infr-block-obj"> <h1>Социальные объекты</h1> <img class="shadow" src="img/shadow.png" alt=""> <p>Волга: 350м, центральный пляж: 900м</p> <p>Авто парковка 5м.</p> <p>Игровая детская площадка 2м.</p> <p>4 продуктовых магазина в пределах 500м.</p> <p>Центр города: 4км.</p> <p>Почта 150007: 600м.</p> </div> </div>

    Do you need to press everything to the left edge of the screen? Remove this:

     .infr-block-obj:nth-child(1){ padding-left: 130px; }
    • I need the text in the block pressed to the left. How to do this? - Matc