title: Navbar inherited from base.html using Django templating doesn't render styles properly
body: <p>I'm implementing a navbar and I wanted to use django templating for the DRY principle. The first picture is its appearance before templating, the second one is after templating. (<a href="https://imgur.com/a/FOEqKFB" rel="nofollow noreferrer">https://imgur.com/a/FOEqKFB</a>)</p>
  
  <p>How do I get the css files to render properly in the inherited html file? I thought it was a case of me not calling the CSS files in base.html (like this one: <a href="https://stackoverflow.com/questions/36208424/how-to-extend-to-base-html-template-styles-in-django">another similar answer</a>), but I checked the code for base.html and I've already called the Bootstrap CDN for the navbar styles on the header. What went wrong in my code?</p>
  
  <p>This is the relevant code for the problem:
  base.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  {% load static %}
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;{% block title %}Title{% endblock title %}&lt;/title&gt;
      {% block head_favicon %}
          &lt;link rel="icon" type="image/x-icon" href="/favicon.ico"&gt;
      {% endblock head_favicon %}
  
      {% block head_meta %}
          {% block head_meta_charset %}
              &lt;meta charset="UTF-8"&gt;
          {% endblock head_meta_charset %}
          {% block head_meta_contentlanguage %}
              &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" value="en-US"&gt;
          {% endblock head_meta_contentlanguage %}
          {% block head_meta_viewport %}
              &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"&gt;
          {% endblock head_meta_viewport %}
      {% endblock head_meta %}
  
      {% block head_css %}
          {% block head_css_site %}
              &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
          {% endblock head_css_site %}
          {% block head_css_section %}{% endblock head_css_section %}
          {% block head_css_page %}{% endblock head_css_page %}
      {% endblock head_css %}
  
      {% block head_javascript %}
          {% block head_javascript_site %}
              &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" async&gt;&lt;/script&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" async&gt;&lt;/script&gt;
              &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" async&gt;&lt;/script&gt;
          {% endblock head_javascript_site %}
          {% block head_javascript_section %}{% endblock head_javascript_section %}
          {% block head_javascript_page %}{% endblock head_javascript_page %}
      {% endblock head_javascript %}
  &lt;/head&gt;
  
  &lt;body&gt;
  {% block navbar %}
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="/"&gt;CCC&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/product"&gt;Products 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/resultpage"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="/signup"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/login"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  {% endblock navbar %}
  
  {% block content %}
      if you see this, something is wrong!
  {% endblock content %}
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CCC.html</p>
  
  <pre><code>{% extends 'CCC/base.html' %}
  
  {% load static %}
  
  {% block title %}Gift Countdown{% endblock title %}
  
  {% block head_css_page %}
    &lt;link href="https://fonts.googleapis.com/css?family=Great+Vibes&amp;display=swap" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="{% static 'homepage/styles/cccStyle.css' %}"&gt;
  {% endblock head_css_page %}
  
  {% block head_javascript_page %}
      &lt;script type='text/javascript' language='javascript' src="{% static 'homepage/scripts/homepage.js' %}" async&gt;&lt;/script&gt;
  {% endblock head_javascript_page %}
  
  {% block content %}
    &lt;div class='bg'&gt;&lt;/div&gt;
    &lt;div class="ctr"&gt;
      &lt;p&gt;It's&lt;/p&gt;
        &lt;div id="demo" onload="countdown();"&gt;&lt;/div&gt;
      &lt;p&gt;Until Christmas!&lt;/p&gt;
    &lt;/div&gt;
    &lt;form class = 'ctrform' action="{% url 'homepage' %}" method="POST"&gt;
      {%csrf_token%}
      {{Reminder}}
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  {% endblock content %}
  
  </code></pre>