Не могу стилизовать 2 карусели даже с другим идентификатором

Question

Я новичок в этом, поэтому, пожалуйста, потерпите меня.

Это мой фрагмент:

https://liveweave.com/WJav5F

Мое ожидаемое поведение - первая карусель (то есть карусель), имеющая полную ширину контейнера, без растяжения или каких-либо искажений.

Текущее поведение: если вторая карусель отображается правильно, первая карусель не соответствует ширине контейнера.

Я пытался использовать селектор идентификаторов, как это, но он не работает:

    #carousel .carousel-inner .item img{

       min-width:100%;

        }

#myCarousel .carousel .item img {   //comment this block and the id carousel  renders correct (no distortion) but break the id myCarousel. 
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

Как @Honzik Kryspin.

#carousel.carousel-inner .item img{

           min-width:100%;

            }

    #myCarousel.carousel .item img {    
            max-width: 100%;
            max-height: 100%;
            display: inline-block;
            position: absolute;
            bottom: 0;
            margin: 0 auto;
            left: 0;
            right: 0;
        }

Answer 1

Я могу обойти комментарий, этот раздел

#myCarousel .carousel .item img {   //comment this block and the id carousel  renders correct (no distortion) but break the id myCarousel. 
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

И поместите код прямо в тег img. Довольно отстой: (* ​​1004 *

Answer 2

В вашем селекторе есть место, это означает, что он ищет .carousel внутри #myCarousel.Вы, вероятно, хотите второй селектор как #myCarousel.carousel .item img