Пробел между изображением и текстом, и когда я использую маржу к изображению для приклеивания к текстовому макету, не работает

Question

White space между изображением и текстом, и когда я использую маркер для изображения для прикрепления к текстовому макету, не работает.

Когда я использую margin-left придерживаться и Дива изображения не в центре нижних экранов из-за маржинальным левым

HTML-кода:

<section id="aa-about-us"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="aa-about-us-area"> 
      <div class="row"> 
      <div class="aa-title"> 
        <h2>Nature's Paradise</h2> 
        <span></span> 
        </div> 
       <div class="col-md-5"> 
       <div class="aa-about-us-left"> 
        <img src="img/homepagecontent1.jpg" alt="image"> 
       </div> 
       </div> 

       <div class="col-md-7"> 
       <div class="aa-about-us-right"> 

        <div class="text-right"> 
        <p>Karjat is an idyllic town and an upcoming taluka of Raigad district for various development projects.<br/> Situated on the western coast on India, Karjat lies in the downhill of Matheran which is the nearest hill station to Mumbai.<br/> The upside being it comes under the MMRDA development zone and the responsibility for planning is entrusted with CIDCO.<br/> 
     Karjat is Strategically located in the centre of the golden triangle viz. Mumbai, Pune and Nashik, It is well connected with for lane roads and a strong railway network.<br/> Karjat is a railway junction between Mumbai-Pune on Central line.<br/> 
     Karjat is an educational hub as there are many Engineering, Medical Pharmacy, Management colleges and Marine academy.<br/> 
    Project in Raigad district like Reliance SEZ, Navi Mumbai SEZ, International Airport (Navi Mumbai), largest exhibition centre (Panvel) and Terminus Railways Stations (Panvel) etc.<br/> Is enhancing the growth in all fronts required to further fuel Karjat and turn it in to preferred first/second home destinations which is a growth centred destination.<br/> 
    Because of its green and pollution free environment many Bollywood Stars, industrialist, businessmen and corporates have their private farm house in Karjat thus evolving as prime weekend gateway destination.<br/> 
    MMRDA has planned to develop a part of area in Karjat-Khopoli belt as recreational hub.<br/> On the horizon are T20 Cricket League Ground, Paint Ball Park, Theme Park, Amusement Park and golf course. 
</p>     
       </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

The CSS Styles:

#aa-about-us { 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area { 
    display: inline; 
    float: left; 
    width: 100%; 
    padding: 100px 0; 

} 
#aa-about-us .aa-about-us-area .aa-about-us-left { 
    margin-top: 15%; 
    display: inline; 
    float: left; 
    width: 100%; 
} 
#aa-about-us .aa-about-us-area .aa-about-us-left img { 
    border: 1px solid #ddd; 
    border-radius: 4px; 

    width: 100%; 

} 

#aa-about-us .aa-about-us-area .aa-about-us-right p { 
    text-align: center; 
} 


#aa-about-us .aa-about-us-area .aa-about-us-right .text-right { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 4px; 

    margin-top: 10%; 
    background-color: #f8f8f8; 
    padding: 10px; 
} 

#aa-about-us .aa-about-us-area .aa-about-us-right { 
    display: inline; 
    float: left; 
    width: 100%; 
} 

.aa-title { 
    display: inline; 
    float: left; 
    width: 100%; 
    text-align: center; 
    margin-bottom: 20px; 
} 
.aa-title p { 
    font-size: 18px; 
    padding: 0 50px; 
} 
.aa-title span { 
    width: 2px; 
    height: 15px; 
    display: inline-block; 
    position: relative; 
} 
.aa-title span:before { 
    content: ''; 
    right: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height: 2px; 
} 
.aa-title span:after { 
    content: ''; 
    left: 4px; 
    top: 7px; 
    position: absolute; 
    width: 100px; 
    height:2px; 
} 

Answer 1

Поскольку вы используете фреймворк bootstrap, каждый столбец имеет предопределенное левое и правое заполнение 15px. Ясно, что обивка,

сделать это,

.col-md-5,.col-md-7{ 
    padding:0px; 
} 

Answer 2

Добавьте класс родительского DIV изображения и содержание & перезапись дополнения с помощью этих классов.

HTML:

<div class="col-md-5 image-container"> 
      <div class="aa-about-us-left"> 
       <img src="img/homepagecontent1.jpg" alt="image"> 
      </div> 
      </div> 

      <div class="col-md-7 content-container"> 
      <div class="aa-about-us-right"> 

       <div class="text-right"> 
       <p>Text</p>    
      </div> 
      </div> 
      </div> 

CSS:

.image-container { 
padding-right: 0px; 
} 
.content-container { 
padding-left: 0px; 
}