如何让Django项目中的CSS在Chrome浏览器正常生效？

我是Python新手，正在学习Dave Gray的线上Django课程，课程中我们为导航功能编写了CSS样式。页面在Edge中显示完全正常，和视频示例效果一致，但Chrome会忽略部分CSS样式，显示效果不符。

编写的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: black;
    color: whitesmoke;
    font-size: 3rem;
    display: flex;
    flex-flow: column;
}

nav {
    padding: 1rem;
    background-color: #44B78B;
    color: white;
    font-size: 2.5rem;
}

main {
    flex-grow: 1;
    display: grid;
    place-content: center;
}

h1,
p {
    text-align: center;
}

a {
    text-decoration: none;
    color: #81dbb8;
}

a:hover {
    opacity: .85;
}

布局HTML代码 #

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}
            Django App
        {% endblock %}
    </title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <script src="{% static 'js/main.js' %}" defer></script>
</head>
<body>
    <nav>
        <a href="/">🏡</a> |
        <a href="/about">😊</a> |
        <a href="/posts">📰</a>
    </nav>
    <main>
        {% block content %}
        {% endblock %} 
     </main>
</body>
</html>

首页HTML代码 #

{% extends 'layout.html' %}

{% block title %}
    Home
{% endblock %}

{% block content %}
    <h1>Home</h1>
    <p>Check out my <a href="/about">About</a> page.</p>
{% endblock %}

请问如何让我的页面兼容Chrome浏览器？

显示效果对比 #

• Edge正常显示：
• Chrome异常显示：

内容的提问来源于stack exchange，提问作者Corey Wilson