Div Container Not Responding to CSS Code / Commands

Viewed 53

On a practice website, I presently have a div container with the class "jumbo-slider__information" that's not responding to any CSS code. I'm trying to add a blue border-box and also manipulate the positioning of the child elements through CSS using:

display: flex;
flex-direction: column;
justify-content: center;

I've double-checked the class name for any misspellings.

Please view my brief 2-minute screen share video here describing the problem in detail:
https://drive.google.com/file/d/1nY6Gbw2UBhAgUZDZA4yUiW3nd9dkJ9Hm/view

Also please view my complete HTML and CSS code here on CodePen: https://codepen.io/rashadnelson/pen/ExXZRZV

I look forward to any insights.

1 Answers

Your CSS is invalid right above the .jumbo-slider__information selector. Remove the semicolon after }:

.jumbo-slider__slide--active .jumbo-slider__slide-bg {
  opacity: 0.5;
};

This should be:

.jumbo-slider__slide--active .jumbo-slider__slide-bg {
  opacity: 0.5;
}

CSS Syntax Documentation

Related