CSSだけで動くドロワーメニューPure Drawerについて

初めまして、初心者ながら皆様にお力添えしていただきたく、ご質問させていただきます。

CSSだけで動くドロワーメニューPure Drawerの実装についてなのですが、参考サイト1, 参考サイト2をもとに作ったのですが、上手く表示されません。

参考サイトに、

html
1<div class="pure-pusher-container">
2    <div class="pure-pusher">
3      <div class="inner">
4         
5      <!-- ここがコンテンツ -->
6         
7      </div>
8    </div>
9  </div>

と表示されているのですが、コンテンツ部分にはなにを書くのでしょうか...

画像のページ

初心者なので無茶苦茶なことをしているかもしれませんが、何卒回答のほどよろしくお願いいたします。

個人的なイメージとしては、ヘッダー部分にドロワーがある状態にしたいです。

【情報追加のご指摘があったので追記させていただきます】

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <meta name="format-detection" content="telephone=no">
6   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
7
8   <title>タイトル</title>
9   <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
10   <link rel="stylesheet" type="text/css" href="../css/pure-drawer.min.css">
11</head>
12<body>
13  <header>
14     <div class="pure-container" data-effect="pure-effect-slide">
15  <input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left">
16  <label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>
17
18  <nav class="pure-drawer" data-position="left">
19    <div class="row collapse">
20     <div class="large-12 columns">
21      <ul class="nav-primary">
22        <li><a href="http://glow-factory.com/blog_web/css/pure-drawer/">Home</a></li>
23        <li><a href="http://blog.mismithportfolio.com/web/20151003puredrawer"></a>Works</li>
24        <li>Member</li>
25        <li>Contact</li>
26      </ul>
27     </div>
28    </div>
29  </nav>
30
31  <div class="pure-pusher-container">
32    <div class="pure-pusher">
33      <div class="inner">
34      </div>
35    </div>
36  </div>
37<label class="pure-overlay" for="pure-toggle-left" data-overlay="left"></label>
38</div>
39  </header>
40        <div class="container">
41          <h1>見出し</h1>
42          <p>文</p>
43        </div>
44        <footer>
45        </footer>
46</body>
47</html>

【追記】
下記のタグを追加したところ、まだましになったのですがこのサイトのドロワーメニューのようにするにはどのようにすればいいのでしょうか？
（枠？ボックス？のように区切りたいです）

html
1 <style>
2  .inner {
3    width: 90%;
4    max-width: 1024px;
5    margin: 0 auto;
6  }
7  img {
8    max-width: 100%;
9  }
10  p {
11    margin-bottom: 3em;
12  }
13  li {
14    list-style: none;
15    color: #fff;
16    font-size: 1.2em;
17    margin-bottom: 1.2em;
18  }
19  .btn {
20    color: #fff;
21    display: block;
22    width: 60%;
23    padding: 24px 0;
24    text-align: center;
25    margin: 24px auto;
26    background-color: #888;
27  }
28  .pure-drawer {
29    background-color: #243040;
30  }
31  .pure-toggle-label {
32    border: none;
33  }
34  .pure-toggle-label .pure-toggle-icon,
35  .pure-toggle-label .pure-toggle-icon:before,
36  .pure-toggle-label .pure-toggle-icon:after {
37    background-color: #999;
38  }
39  .pure-toggle-label:hover .pure-toggle-icon,
40  .pure-toggle-label:hover .pure-toggle-icon:before,
41  .pure-toggle-label:hover .pure-toggle-icon:after {
42    background-color: #00bfff;
43  }
44  nav.pure-drawer {
45    padding-top: 100px;
46  }
47  </style>