为什么我的第二个旋转木马的CSS会覆盖第一个旋转木马？

Question

我有一个学校网站，我希望有2个轮播，1个用于展示学校通过图像（如幻灯片）进行的活动，另一个用于通过文本显示公告。

当我在CSS和JS中添加第二个轮播（公告）时，我的活动幻灯片显示变小了。

添加脚本和JS后：

CSS for Events轮播：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
           width: 100%;
           margin: auto;
 }

事件的HTML：

<div class="jumbotron" style="background:transparent !important;">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- 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>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                    <li data-target="#myCarousel" data-slide-to="4"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">

                    <div class="item active">
                        <img src="Images/event1.jpg" alt="1">
                        <div class="carousel-caption">
                            <h3>Event 1</h3>
                            <p>This is the 1st event</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="Images/event2.jpg" alt="2">
                        <div class="carousel-caption">
                            <h3>Event 2</h3>
                            <p>This is the 2nd event</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="Images/event3.jpg" alt="3">
                        <div class="carousel-caption">
                            <h3>Event 3</h3>
                            <p>This is the 3rd event</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="Images/event4.jpg" alt="4">
                        <div class="carousel-caption">
                            <h3>Event 4</h3>
                            <p>This is the 4th event</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="Images/event5.jpg" alt="5">
                        <div class="carousel-caption">
                            <h3>Event 5</h3>
                            <p>This is the 5th event</p>
                        </div>
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

公告轮播的CSS：

#carousel {
            position: relative;
            width: 100%;
            margin: 0 auto;
        }

        #slides {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 250px;
        }

        #slides ul {
            list-style: none;
            width: 100%;
            height: 250px;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #slides li {
            width: 100%;
            height: 250px;
            float: left;
            text-align: center;
            position: relative;
            font-family: lato, sans-serif;
        }

        /* Styling for prev and next buttons */

        .btn-bar {
            width: 60%;
            margin: 0 auto;
            display: block;
            position: relative;
            top: 40px;
        }

        #buttons {
            padding: 0 0 5px 0;
            float: left;
        }

        #buttons a {
            text-align: center;
            display: block;
            font-size: 30px;
            float: left;
            outline: 0;
            margin: 0 60px;
            color: #b14943;
            text-decoration: none;
            display: block;
            padding: 9px;
            width: 35px;
        }

        a#prev:hover,
        a#next:hover {
            color: #FFF;
            text-shadow: .5px 0px #b14943;
        }

        .bodyContent {
            font-family: sans-serif;
            font-weight: 300;
            display: table-cell;
            vertical-align: middle;
            padding: 5px 20px;
            font-family: 'Lato', Calibri, Arial, sans-serif;
        }

        .headContent {
            /*font-size: 20px;*/
            color: #000000;
            font-size: 18px;
            height: 30px;
        }

        .bodyContent {
            height: 150px;
            font-size: 12px;
            color: #000;
            text-shadow: .5px 0px #b14943;
        }

        .headers,
        .content {
            display: table;
            width: 100%;
        }

公告HTML：

<div id="announcementSlider">
  <div id="carousel">
    <div id="slides">
       <ul>
         <li class="slide">
              <div class="headers">
                  <h3 class="headContent">Announcement 1</h3>
              </div>
              <div class="content">
                   <p class="bodyContent">This is announcement 1</p>
              </div>
          </li>
          <li class="slide">
              <div class="headers">
                   <h3 class="headContent">Announcement 2</h3>
              </div>
              <div class="content">
                    <p class="bodyContent">This is announcement 2</p>
              </div>
           </li>
           <li class="slide">
               <div class="headers">
                     <h3 class="headContent">Announcement 3</h3>
               </div>
               <div class="content">
                     <p class="bodyContent">This is announcement 3</p>
               </div>
            </li>
        </ul>
   </div>
   <div class="btn-bar">
        <div id="buttons">
               <a id="prev" href="#"><</a><a id="next" href="#">></a>  
        </div>
   </div>
  </div>
</div>

我可以知道我的旋转木马是如何被覆盖的吗？