Issues with bootstrap carousel in Dreamweaver

Hello, I am a confessed complete and utter novice when it comes to anything related to web design. I am currently building a website as part of a requirement for one of my college modules. I've run into an issue with the carousel feature in dreamweaver. Firstly, I can't figure out how to get the carousel exactly where I want it. The aim is to have it below a static image on my page with little to no space in between. Both the carousel and the image are in the same section. However, when I go to insert the carousel it inserts in between the first two sections, which leaves a blank white space between the background colours of the sections and looks terrible. In addition, for some reason two of the images in the carousel are identically sized yet one is far larger. I can't fathom why that is.

Here is the code I'm working with (image names removed for obvious reasons):

<secton id="one"><img src="branding"  class="img-responsive" alt="Placeholder image">

  <div class="container-fluid">

  <div id="carousel1" class="carousel slide" data-ride="carousel">

   <ol class="carousel-indicators">

     <li data-target="#carousel1" data-slide-to="0"></li>

     <li data-target="#carousel1" data-slide-to="1"></li>

     <li data-target="#carousel1" data-slide-to="2"></li>

      </ol>

   <div class="carousel-inner" role="listbox">

     <div class="item active"><img src="carousel image 1" alt="First slide image" class="center-block">

       <div class="carousel-caption">

         <h3>First slide Heading</h3>

         <p>First slide Caption</p>

          </div>

        </div>

     <div class="item"><img src="carousel image 2" alt="Second slide image" class="center-block">

       <div class="carousel-caption">

         <h3>Second slide Heading</h3>

         <p>Second slide Caption</p>

          </div>

        </div>

     <div class="item"><img src="carousel image 3" alt="Third slide image" class="center-block">

       <div class="carousel-caption">

         <h3>Third slide Heading</h3>

         <p>Third slide Caption</p>

          </div>

        </div>

      </div>

   <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

  </div>

If anyone could help me I'd really appreciate it. As I've already stated, I have barely any experience in this sort of thing so if the problem is something really obvious and stupid please be nice.