Выравнивание бутстрапа div

Question

Невозможно выровнять контейнер div, содержащий изображение, сразу после окончания тега заголовка.

Вот ссылка Jsfiddle

http://jsfiddle.net/chaitu11/hef6rp23/

<div id="Intro"> 
<p style="margin-left:114px; padding:5px;">Welcome to our new and Mana Aravathi.</p> 
</div> 
<!-------------------------------------------> 
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="" class="navbar-brand">Logo</a> 
    </div> 
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
     <ul class="nav navbar-nav"> 
     <li> 
      <a href="#" class="active">Know Aravathi</a> 
     </li> 
       <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Food and dining <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Local Dishes</a></li> 
       <li><a href="#">Food Festivals</a></li> 
       <li><a href="#">Dining Out</a></li> 
      </ul> 
      </li> 
     <li> 
      <a href="#">Business</a> 
     </li> 
     <li> 
      <a href="#">Hotels</a> 
     </li> 
     <li> 
      <a href="#">Festival and events 
</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header> 

Я хочу, чтобы этот контейнер DIV, чтобы начать после того, как тег заголовка заканчивается

<div class="container"> 
    <img src="http://www.jssor.com/img/landscape/11.jpg" /> 
</div> 

Answer 1

Я думаю, у вас есть причина для использования .container класса, так что о добавлении .main класса, который обеспечивает nessecary отступов от верхних:

.main { 
    padding-top: 80px; 
} 

<div class="container main"> 
    <img src="http://www.jssor.com/img/landscape/11.jpg" /> 
</div> 

http://jsfiddle.net/58g39xs5/

Answer 2

Если удалить класс контейнера, он выравнивает правильно ,

См. here.

<div> 
    <img src="http://www.jssor.com/img/landscape/11.jpg" /> 
</div> 

EDIT: если вы хотите, чтобы переместить изображение вниз, а затем придать ему новый класс («основной») и использовать свойство «Верхнее поле» в CSS, как this.

.main {margin-top:100px;}