django css 反映

今Djangoをやっているのですが、複数のhtmlファイルに対して同じCSSファイルを適用しようと思っているのですが、どうやればよろしいでしょうか

base.html

py
1{% load static %}
2<html lang="en" dir="ltr">
3  <head>
4    <title>Fooden</title>
5
6  </head>
7  <body>
8  {% block extrahead %}
9    <link href="{% static 'base.css' %}" rel="stylesheet">
10    {% endblock %}
11    <div class="test">
12      <div id='main-name'>
13        <span>Post</span>
14      </div>
15      <input id="sbox1"  id="s" name="s" type="text" placeholder="検索 …" />
16      <div class="test2">
17        <div id="nav-drawer">
18          <input id="nav-input" type="checkbox" class="nav-unshown">
19          <label id="nav-open" for="nav-input"><span></span></label>
20          <label class="nav-unshown" id="nav-close" for="nav-input"></label>
21
22          </div>
23        </div>
24      </div>
25      {% block content %}
26      {% endblock %}
27
28  </body>
29</html>
30

detail.html

py
1{% extends 'base.html' %}
2{% block content %}
3{% for post in posts %}
4
5<div menu>
6    <p>{{ post.menu_name }}</p>
7    <p>{{ post.picture }}</p>
8    <div class="review_more">
9    <p>{{ post.review }}</p>
10    </div>
11</div>
12{% endfor %}
13{% endblock %}

home.html

py
1{% extends 'base.html' %}
2{% block content %}
3{% for image in object_list %}
4{% block extrahead %}
5    <link href="{% static 'base.css' %}" rel="stylesheet">
6    {% endblock %}
7<div class="img-1">
8  <p><a href="{% url 'detail' pk=image.pk %}"><img alt="" src="{{ image.picture.url }}" width="300px" /></a></p>
9</div>
10{% endfor %}
11{% endblock %}

base.css

css
1#nav-drawer {
2  position: relative;
3}
4
5/*チェックボックス等は非表示に*/
6.nav-unshown {
7  display:none;
8}
9
10/*アイコンのスペース*/
11#nav-open {
12  display: inline-block;
13  width: 30px;
14  height: 22px;
15  vertical-align: middle;
16}
17
18/*ハンバーガーアイコンをCSSだけで表現*/
19#nav-open span, #nav-open span:before, #nav-open span:after {
20  position: absolute;
21  height: 3px;/*線の太さ*/
22  width: 25px;/*長さ*/
23  border-radius: 3px;
24  background: #555;
25  display: block;
26  content: '';
27  cursor: pointer;
28}
29#nav-open span:before {
30  bottom: -8px;
31}
32#nav-open span:after {
33  bottom: -16px;
34}
35
36/*閉じる用の薄黒カバー*/
37#nav-close {
38  display: none;/*はじめは隠しておく*/
39  position: fixed;
40  z-index: 99;
41  top: 0;/*全体に広がるように*/
42  left: 0;
43  width: 100%;
44  height: 100%;
45  background: black;
46  opacity: 0;
47  transition: .3s ease-in-out;
48}
49
50/*中身*/
51#nav-content {
52
53  overflow: auto;
54  position: fixed;
55  top: 0;
56  left: 0;
57  z-index: 9999;/*最前面に*/
58  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
59  max-width: 300px;/*最大幅（調整してください）*/
60  height: 100%;
61  background: #fff;/*背景色*/
62  transition: .3s ease-in-out;/*滑らかに表示*/
63  -webkit-transform: translateX(-105%);
64  transform: translateX(-105%);/*左に隠しておく*/
65
66}
67
68/*チェックが入ったらもろもろ表示*/
69#nav-input:checked ~ #nav-close {
70  display: block;/*カバーを表示*/
71  opacity: .5;
72}
73
74#nav-input:checked ~ #nav-content {
75  -webkit-transform: translateX(0%);
76  transform: translateX(0%);/*中身を表示（右へスライド）*/
77  box-shadow: 6px 0 25px rgba(0,0,0,.15);
78}
79#sbox1{
80  max-width:700px;
81  height:40px;
82  outline:0;
83  margin-bottom:40px;
84  background:#eee;
85  position:absolute;
86  top:20px;
87  left:40%;
88}
89
90#main-name {
91  text-align: left;
92  font-size: 50px;
93}
94
95#nav-content {
96  text-align: center;
97  top: 0;
98}
99
100#nav-drawer {
101  text-align: right;
102  top: 0;
103}
104
105.test {
106  position:relative;
107}
108.test2 {
109  position:absolute;
110  top:20px;
111  right:20px;
112}
113
114#image {
115  display: inline-block; /* ここがポイント */
116    height: 80px;
117    margin-right: 15px;
118    margin-bottom: 15px;
119}
120
121.img-1 {
122  position: absolute;
123  top: 50%;
124  left: 50%;
125  -webkit-transform: translateY(-50%) translateX(-50%);
126  transform: translateY(-50%) translateX(-50%);
127  padding: 20px;
128  border: 1px solid #ccc;
129}