HTML은

  <section class="notice">


    <div class="notice-line">

      <div class="bg-left"></div>

      <div class="bg-right"></div>

      <div class="inner"></div>

    </div>  

    

  </section>


css는

.notice{


}


.notice .notice-line{

  relative;

}


.notice .notice-line .bg-left{

  absolute;

  top: 0;

  left: 0;

  width: 50%;

  height: 100%;

  background-color: #333;

}


.notice .notice-line .bg-right{

  absolute;

  top:0;

  right: 0;

  width: 50%;

  height: 100%;

  background-color: #f6f5ef;

}


.notice .notice-line .inner{

  height: 200px;

  background-color: orange;

}


이런 구조인데 출력하면 inner의 오렌지가 안나오고 bg-left와 bg-right가 출력되더라고요.

셋다 우선순위 합이 같을 때는 HTML의 마지막 요소가 가장 크다고 하던데, 왜 오렌지가 출력이 안되나요?