HTML/CSS - I can't get my image and bootstrap carousel to both stack vertically, center across the width and be responsive

Question

First post, but long time lurker, since i can get answers to most of my questions through searching answers to previously answered questions. I have played around with many different examples given in previous examples but can not get it to work for me. I am using a responsive grid type system/layout to get my website to work for both desktop and mobile but am facing a problem. On my home page I have two div containers, one contains and image, the container is set to span the full screen (except for a 1% margin at the edges) then i have another div container, inside which is a bootstrap sliding carousel.

The carousel sits perfectly centered in the screen, the image, with either stack directly behind it, (if i use the css position: absolute;) to center the image, if i use position: relative and various margin or padding options, no matter what i do i can not get it to stack both above the carousel, and also resize when the screen width is reduced. I am using max-width:% and height:auto as i do not want the image to scale up to a bigger screen, but simply to not remain the same size and need to be scrolled on smaller media.

The carousel works perfectly (i guess thats down to bootstrap code not mine :) ) but for the life of me i can not get the image to play nice.

This is the code:

CSS

.carousel {
 position:absolute;
 width: 100%;
 margin: 0 auto;
 z-index: 20;
 display:inline-block; 
 
}

.homewrap {
 width:100%;
 margin: auto;
 clear:both;
 
}

img.ri
{
 position:absolute;
 max-width: 100%;
 margin: 0 auto;
 display:inline-block;
}

.section {
 clear: both;
 padding: 1%;
 margin: 1%;
}

.col {
 display: block;
 float:left;
 margin: 1% 0 1% 1.6%;
 text-align:justify;
}

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

HTML

<div class="homewrap">
 <div class="section group">
     <div class="col span_3_of_3">
  
   <h1><img src="images/logo.png" class="ri"/></h1>
   
        </div>
    </div>
<!----------------------Carousel-------------------------->
 <div class="section group">
     <div class="col span_3_of_3">
  <div class="carousel" >
   <div id="homeCarousel" class="carousel slide carousel-fit" style="overflow:hidden" data-ride="carousel" data-interval="3000">
   <!-- Indicators -->
     <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
     </ol>
    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
      <div class="item active">
       <img src="images/index/01.jpg" alt="First slide">
      </div>
      <div class="item">
       <img src="images/index/02.jpg" alt="Second slide">
      </div>
      <div class="item">
       <img src="images/index/03.jpg" alt="Third slide">
      </div>
     </div> 
    <!-- Controls -->
     <a class="left carousel-control" href="#homeCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a class="right carousel-control" href="#homeCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
     </a>
   </div>
  </div> <!--end carousel-->
        </div>
 </div>
</div>

Thanks in advance for any assistance.