Проблема с версткой Как исправить это?

В общем нужна помощь. Я хотел создать такое

Такое

5edb4ff550524221062530.png


А вышло другое
Другое
5edb5026a5795259463551.png


В чем проблема?

1. Когда я делаю отступы между картинками, меняется отступ только у картинок с текстом слева. Другие не меняют положение.
2. Может где в коде накосячил.

HTML
<section>
        <div class="container">
             <div class="container">
             <div class="service">
             <h2>About us</h2>
             <p>Montrovello Costovello Puntrovello</p>
         </div>
         
         <div class="inner clearfix">
           
            <div class="inner_one">
            
            <img src="img/about1.jpg" alt="">
            
             <h3>Clpbozeka zaluper</h3>
             <p> Lorem ipsum dolor sit amet consectetur adipisicing elit Autem illum voluptas quisquam obcaecati officiis placeat laborum deserunt aut ut ipsum consequatur odit ipsa quibusdam quis numquam beatae! Voluptatum, maiores, est?</p>
             
             </div>
             
               <div class="inner_two">
            
            <img src="img/about2.jpg" alt="">
            
             <h3>Clpbozeka zaluper</h3>
             <p> Lorem ipsum dolor sit amet consectetur adipisicing elit Autem illum voluptas quisquam obcaecati officiis placeat laborum deserunt aut ut ipsum consequatur odit ipsa quibusdam quis numquam beatae! Voluptatum, maiores, est?</p>
             
             </div>
             
              <div class="inner_one">
            
            <img src="img/about1.jpg" alt="">
            
             <h3>Clpbozeka zaluper</h3>
             <p> Lorem ipsum dolor sit amet consectetur adipisicing elit Autem illum voluptas quisquam obcaecati officiis placeat laborum deserunt aut ut ipsum consequatur odit ipsa quibusdam quis numquam beatae! Voluptatum, maiores, est?</p>
             
             </div>
             
               <div class="inner_two">
            
            <img src="img/about2.jpg" alt="">
            
             <h3>Clpbozeka zaluper</h3>
             <p> Lorem ipsum dolor sit amet consectetur adipisicing elit Autem illum voluptas quisquam obcaecati officiis placeat laborum deserunt aut ut ipsum consequatur odit ipsa quibusdam quis numquam beatae! Voluptatum, maiores, est?</p>
             
             </div>
             
             
             </div>
             </div>
             </div>
        
        
    </section>


CSS
.inner {
    
    margin-top: 100px;
}

.inner_one img {
    
    float: right;
    margin-right: 385px;

    
}

.inner_one h3 {
    margin-top: 50px;
    display: block;
    width: 200px;
    margin-bottom: 5px;
    font-size: 20px;
    padding-left: 120px;
    text-align: right;
}

.inner_one p {
    
    padding-left: 120px;
    text-align: right;
    display: block;
    width: 200px;
    color: dimgray;
    font-size: 12px;
    line-height: 1.6;
    

}


.inner_two img {
    
    float: left;
    margin-left: 362px;
    margin-top: 50px;
}

.inner_two h3 {
   padding-left: 580px;
   text-align: left;
   display: block;
   padding-top: 50px;
   font-size: 20px;
    
    
}

.inner_two p {
    
    padding-left: 580px;
    padding-right: 110px;
    font-size: 12px;
    line-height: 1.6;
    color: dimgray;
    text-align: left;
    display: block;
}


Заранее благодарю за помощь :3
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
А вы пробовали использовать flex? Тогда не нужно будет заморачиваться отступами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы