Estilizando o CSS da nav de menu

aula207_ola_django/base/global/partials/menu.html

@@ -1,5 +1,5 @@
-<nav>
+<nav class="menu">
-  <ul>
+  <ul class="menu__links">
     <li>
       <a href="{% url 'home:home' %}">Home</a>
     </li>
@@ -10,4 +10,4 @@
       <a href="{% url 'blog:exemplo' %}">Exemplo</a>
     </li>
   </ul>
-</nav>
+</nav>

aula207_ola_django/base/static/global/css/style.css

@@ -7,6 +7,15 @@
   box-sizing: border-box;
 }
 
+a {
+  color: #0078e8;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
 html {
   font-size: 62.5%;
 }
@@ -30,6 +39,22 @@ body {
   box-shadow: 5px 2px 5px rgba(0, 0, 0, 10%);
 }
 
+.menu {
+  background: #000;
+  padding: 0 1.5rem;
+}
+
+.menu__links {
+  list-style: none;
+  display: flex;
+}
+
+.menu__links a {
+  display: block;
+  color: #fff;
+  padding: 1.5rem;
+}
+
 @media (min-width: 600px) {
   .content:not(:has(.single-post)) {
     grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));