travis johnson commented on WILL PAY! Need help centering 2000px carousel on the radiance theme

Here's my code. Every time I change the li to 100% the carousel disappears. Thoughts?

HTML:

<div id="carousel-wrapper"><div id="carousel"> <!-- <a style="display: none;" id="carousel-prev" class="prev browse left" title="Previous slide"><span class="arrow ir">Next</span></a><a style="display: none;" id="carousel-next" class="next browse right" title="Next slide"><span class="arrow ir">Previous</span></a> -->              <ol class="items">
        {% if settings.show_carousel_item_1 %}<li><div id="slide1"></div></li>
        {% endif %}
        {% if settings.show_carousel_item_2 %}<li>
          {% if settings.carousel_item_2_link != empty %}
          {{ 'carousel-item-2.jpg' | asset_url | img_tag: settings.carousel_item_2_alt | link_to: settings.carousel_item_2_link }}
          {% else %}
            {{ 'carousel-item-2.jpg' | asset_url | img_tag: settings.carousel_item_2_alt }}
          {%endif%}</li>
        {% endif %}
        {% if settings.show_carousel_item_3 %}<li>
          {% if settings.carousel_item_3_link != empty %}
          {{ 'carousel-item-3.jpg' | asset_url | img_tag: settings.carousel_item_3_alt | link_to: settings.carousel_item_3_link }}
          {% else %}
            {{ 'carousel-item-3.jpg' | asset_url | img_tag: settings.carousel_item_3_alt }}
          {%endif%}</li>
        {% endif %}
        {% if settings.show_carousel_item_4 %}<li>
          {% if settings.carousel_item_4_link != empty %}        
          {{ 'carousel-item-4.jpg' | asset_url | img_tag: settings.carousel_item_4_alt | link_to: settings.carousel_item_4_link }}
          {% else %}
            {{ 'carousel-item-4.jpg' | asset_url | img_tag: settings.carousel_item_4_alt }}
          {%endif%}</li>
        {% endif %}
        {% if settings.show_carousel_item_5 %}<li>
          {% if settings.carousel_item_5_link != empty %}        
          {{ 'carousel-item-5.jpg' | asset_url | img_tag: settings.carousel_item_5_alt | link_to: settings.carousel_item_5_link }}
          {% else %}
            {{ 'carousel-item-5.jpg' | asset_url | img_tag: settings.carousel_item_5_alt }}
          {%endif%}</li>
        {% endif %}
        {% if settings.show_carousel_item_6 %}<li>
          {% if settings.carousel_item_6_link != empty %}      
          {{ 'carousel-item-6.jpg' | asset_url | img_tag: settings.carousel_item_6_alt | link_to: settings.carousel_item_6_link }}
          {% else %}
            {{ 'carousel-item-6.jpg' | asset_url | img_tag: settings.carousel_item_6_alt }}
          {%endif%}</li>
        {% endif %}                                 </ol>  </div>
    {% if settings.show_carousel_dots %}<div id="carousel-slide-menu"></div>
    {% endif %}</div>

CSS:

/**
 * Homepage Carousel
 */

#carousel-wrapper{ 
  margin: -8px 0 45px 0;
}

#carousel{
  height: {{ settings.carousel_height }}px;
  width: 100%;
  position: relative;
  z-index: 50;
  overflow: hidden;
}
#carousel p,
#carousel li{
  margin: 0;
}

#carousel .items{
  margin: 0 auto;
  padding: 0;
  width: 12000px;
  position: absolute;
  z-index: 1;
}

#carousel .items > li{
  height: {{ settings.carousel_height }}px;
  width: 2000px; /* Must stay 2000px */
  margin: 0;
  list-style: none;
  float: left;
}

#carousel .items img { 
  max-width: 100%;
} /* I was on the fence about adding this line in, but hope it will do some good */

#carousel .items div {
  width: 100% !important;
  height: 430px;
  overflow: hidden;
}
#carousel .items #slide1 {
  width: 100% !important;
  background: url('{{ 'carousel-item-1.jpg' | asset_url }}') center center no-repeat;
}