Div element won't change under media query

[cloud1]

Hi everyone,

I’m having struggles with this specific div element in my Tribute page project. In my code, I have the “list” class have a max-width of 850px when the screen is greater than 868px. I want it set so that the “list” element is 90% of the screen’s width when the screen is less than 868px wide. The “@media” rule works for other elements except the list class. What do I have wrong here? Any help would be appreciated very much.

Here is my CodePen Project to view the issue: https://codepen.io/cloudio/pen/jOBZOVz

take a look at the code lines

@media (max-width: 868px) {
    .IwataIMG {
        width: 95%;
    }
    .list {
        width: 90%;
    }
}

along with

.list {
    background-color: white;
    width: 900px;
    display: block;
    margin: auto;
    border-radius: 10px;
    padding: 10px 0px 10px 0px;
    box-shadow: 1px 1px 10px black;
}

Thank you!

[bbsmooth]

The order of the rules in the CSS file matters. Read about the CSS cascade for more information.

Knowing that order matters, what do you think you need to move to get this to work the way you want?

[cloud1]

Ahhh I see what I did wrong here, much appreciated for the guidance!