CSS styling not being applied to a specific div on an HTML document

Question

I have an HTML document with a <div> element that was originally styled in a separate CSS file via its id attribute. However, I wanted to create a similar element on another page with the same styling, so I changed the id attribute to a class attribute, and changed the relevant CSS from #id{} to .class{} .

This small change causes it to no longer be styled, and I don't know why.

Here is the relevant code before the change:

CSS:

#player_options_button_container{
    display: block;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

HTML:

<div id="player_options_button_container">
    <button class="hit_button" type="button" >Hit</button>
    <button class="stay_button" type="button" >Stay</button>
</div>

This works as expected. But when I make the following changes:

CSS:

.player_options_button_container{
    display: block;
    border: solid;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

HTML:

<div class="player_options_button_container">
    <button class="hit_button" type="button" >Hit</button>
    <button class="stay_button" type="button" >Stay</button>
</div>

the div no longer takes on any of the assigned styling attributes. Furthermore, this only happens within my main HTML document. If I create a new HTML file that contains only the <div> I am interested in and include the same style sheet, then the changes work just fine.

Ultimately, my question is: what else in an HTML document could possibly be interfering with the styling of a <div> in this way?

Other things I have tried/checked:

1) ran a ctrl+f search of my .js file, my .css file and my .html file to see if that class/id was being called elsewhere, but the phrase "player_options_button_container" only exists in one location in the HTML doc and one location in the CSS file and not at all in .js

2) ran my program with chrome developer tools and inspected the html elements of my program, both before and after the change, but I couldn't see anything odd and no errors were getting thrown. Other than that, I don't really know what to look for.

3) tried in-line styling of the div, after changing it's id attribute to a class attribute. in-line styling works fine, but using a <style> tag in the header does not.

Any ideas would be greatly appreciated.

Answer 1

Thanks for the advice, but I did figure it out and it turned out to be really simple. I'm running and testing my site with a MAMP server on localhost, and apparently it was just giving me a cached version of some of my files, so it seems like when I made an update and refreshed the page, the HTML document was updated, but the browser was still using a cached version of the css file, which resulted in no css being applied. A clear cache and hard refresh solved the problem.