Выравнивание HTML-полей

Question

Итак, всякий раз, когда в ящике есть содержимое, они выравниваются странно, а не бок о бок. Как это исправить? Я пробовал довольно много, и я не мог понять это.

Любая помощь здесь будет весьма признателен/

Так у меня есть Это как мой основной код:

.content-wrapper { 
 
\t  background-color: #B31CFF; 
 
\t  width: 100%; 
 
\t  height: 1000px; 
 
    } 
 

 
    .content { 
 
    \t background-color: #E3E3E3; 
 
    \t width: 80%; 
 
    \t height: 1000px; 
 
    \t margin-left: 10%; 
 
    \t margin-right: 10%; 
 
    } 
 
    
 
    
 
    .donator-box { 
 
    \t border: 3px solid #FFF; 
 
    \t background-color: #FFF; 
 
    \t margin: 1%; 
 
    \t display: inline-block; 
 
    \t width: 47%; 
 
    \t height: 250px; 
 
    \t border-radius: 5px; 
 
    \t overflow: hidden; 
 
    } 
 
    
 
    .donator-box { 
 
    \t padding: 5px; 
 
    }

<div class="content-wrapper"> 
 
\t \t \t 
 
\t <div class="content"> 
 

 
\t \t <div class="donator-box"> 
 
\t \t \t <div class="donator-content"> 
 
\t \t \t \t content 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="donator-box"> 
 
\t \t \t <div class="donator-content"> 
 
\t \t \t \t content 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="advert"> 
 

 
\t \t </div> 
 
\t </div> 
 
\t \t 
 
</div> 
 

 

Answer 1

Add коробчатой ​​проклейки: границы коробки; на ".donator коробки"

\t .content-wrapper { 
 
background-color: #B31CFF; 
 
width: 100%; 
 
height: 1000px; 
 
} 
 

 
.content { 
 
    background-color: #E3E3E3; 
 
    width: 80%; 
 
    height: 1000px; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
} 
 

 

 
.donator-box { 
 
    border: 3px solid #FFF; 
 
    background-color: #FFF; 
 
    margin: 1%; 
 
    display: inline-block; 
 
    width: 47%; 
 
    height: 250px; 
 
    border-radius: 5px; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
} 
 

 
.donator-box { 
 
    padding: 5px; 
 
}

<div class="content-wrapper"> 
 

 
     <div class="content"> 
 

 
       <div class="donator-box"> 
 
        <div class="donator-content"> 
 
         content 
 
        </div> 
 
       </div> 
 
       <div class="donator-box"> 
 
        <div class="donator-content"> 
 
         content 
 
        </div> 
 
       </div> 
 

 
       <div class="advert"> 
 

 
       </div> 
 
     </div> 
 

 
    </div>