Some externally-linked CSS working, some not-CodePudding

I am working on a photo portfolio website using Django framework. On the current page, I have one photo element and one box element with text inside. My CSS is linked externally in the html script tag. The CSS for the photo is being applied, but the CSS for the box is not. When I move the box CSS into a style tag on my html document, it is applied.

I've searched and found some information on CSS priority but I don't think that's what's happening here as some of the CSS works externally. I've also taken a look via Inspect in Chrome to see if something was being applied that I didn't know about, but didn't see anything.

Has anyone experienced this before? Even stranger, in the full code below, the CSS is applied to the box element!

#box {
    background-color: lightgray;
    width: 300px;
    border: 15px solid green;
    padding: 50px;
}

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <link rel="stylesheet" href="{% static 'entrance/entrance.css' %}">
        <script src="{% static 'entrance/entrance.js' %}"></script>
    </head>

    <body>
        <img src="{% static 'entrance/Waterfall.jpg' %}" alt="issue here" id="waterfall" />
        <div id="box">This is just some random text I'm using to test the box design.</div>
    </body>
</html>

CodePudding user response：

Try refreshing by pressing Ctrl Shift R. This refreshes the cache and the previously saved css could be the only thing running.