背景色から文字がはみ出るのは正常なのか。

header内に記述したliタグが、はみ出て表示されるのは正常なのでしょうか？
見本にしている動画では、私と同じように縦に並んではいますがheaderの緑の背景色内にliタグがおさまっています。
見本にしている動画のヘッダー画像の大きさは、213×39でした。
私が挿入しているのは60×60です。
画像の大きさに押されて下にいっているだけでしょうか？
わかる方がいらっしゃいましたら、お力を貸していただきたいです。

HTML
1  <!DOCTYPE html>
2  <html lang="ja">
3    <head>
4      <meta charset="utf-8">
5      <title>クリニック模写</title>
6      <meta name="description" content="クリニック模写">
7      <meta name="keywords" content="クリニック模写,練習">
8      <link rel="stylesheet" href="style.css" type="text/css" media="screen">
9    </head>
10    
11  <body>
12      <!------ 大きな箱はじまり----->
13      <div id="wrapper"> 
14
15          <!------ ヘッダーはじまり----->
16          <header>
17            <h1><img src="img/rogo.png" alt="ロゴ" class="rogo"></h1>
18            <nav>
19              <ul>
20                <li>No.1</li>
21                <li>No.2</li>
22                <li>No.3</li>
23                <li>No.4</li>
24                <li>No.5</li>
25              </ul>
26              
27              
28              
29              
30            </nav>
31          </header>
32          <!------ ヘッダーおわり----->
33          
34          
35          <!------ #mainimagはじまり----->
36          <div id="mainimage">
37            
38          </div>
39          <!------ #mainimagおわり----->
40          
41          
42          
43          <div class="yokonarabi"><!----- 横並びのボックスはじまり----->
44    
45          
46          
47          <!------ #leftはじまり----->
48          <div class="left">
49            
50          </div>
51          <!------ #leftおわり----->
52          
53          
54          <!------ #lightはじまり----->
55          <div class="light">
56            
57          </div>
58          <!------ #lightおわり----->
59          
60      </div><!----- 横並びのボックスおわり----->
61          
62          
63      </div>
64      <!------ 大きな箱おわり----->
65      
66  <footer></footer>
67      
68  </body>
69    
70  </html>

CSS
1	@charset "utf-8";
2
3	/* ========================================
4	    リセットcss
5	========================================= */
6	html, body, div, span, applet, object, iframe,
7	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8	a, abbr, acronym, address, big, cite, code,
9	del, dfn, em, img, ins, kbd, q, s, samp,
10	small, strike, strong, sub, sup, tt, var,
11	b, u, i, center,
12	dl, dt, dd, ol, ul, li,
13	fieldset, form, label, legend,
14	table, caption, tbody, tfoot, thead, tr, th, td,
15	article, aside, canvas, details, embed,
16	figure, figcaption, footer, header, hgroup,
17	menu, nav, output, ruby, section, summary,
18	time, mark, audio, video {
19		margin: 0;
20		padding: 0;
21		border: 0;
22		font-style:normal;
23		font-weight: normal;
24		font-size: 100%;
25		vertical-align: baseline;
26	}
27	article, aside, details, figcaption, figure,
28	footer, header, hgroup, menu, nav, section {
29		display: block;
30	}
31	html{overflow-y: scroll;}
32	blockquote, q {quotes: none;}
33	blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
34	input, textarea,{margin: 0; padding: 0;}
35	ol, ul{list-style:none;}
36	table{border-collapse: collapse; border-spacing:0;}
37	caption, th{text-align: left;}
38	a:focus {outline:none;}
39
40
41	/* ========================================
42		フロートの解除
43	========================================= */
44
45	.clearfix:after {
46	  content: ".";
47	  display: block;
48	  height: 0;
49	  clear: both;
50	  visibility: hidden;
51	}
52
53
54
55	/* ========================================
56		全体設計
57	========================================= */
58	body {
59		color:#555;
60		font-size: 14px;
61		line-height: 1;
62		font-family: "メイリオ", Meiryo;
63		background-color: #fff;
64		-webkit-font-smoothing: antialiased;
65		-moz-osx-font-smoothing: grayscale;
66	}
67
68
69	/* ========================================
70		wrapper
71	========================================= */
72	
73	
74	div#wrapper{
75		width: 960px;
76		height: auto;
77		margin: 0 auto;
78	}
79	
80	
81		/* ========================================
82			ヘッダー
83		========================================= */
84		
85
86	header{
87		width: 960px;
88		height: 99px;
89		background: rgb(26, 122, 75);
90	}
91
92	
93		/* ========================================
94			メイン画像
95		========================================= */
96		
97		
98	div#mainimage{
99		width: 960px;
100		height: 300px;
101		background: rgb(162, 76, 61);
102		margin-bottom: 30px;
103	}
104	
105	.rogo{
106		width: 60px;
107		height: 100%;
108	}
109
110	
111		/* ========================================
112			左のボックス
113		========================================= */
114		
115		
116	
117	.left{
118		width: 280px;
119		height: 300px;
120		background: rgb(26, 122, 75);
121		margin-right: 30px;
122	}
123	
124	
125		/* ========================================
126			右のボックス
127		========================================= */
128		
129
130	.light{
131		width: 650px;
132		height: 300px;
133		background: rgb(72, 66, 110);
134	}
135	
136	
137	
138		/* ========================================
139			左と右を包むボックス
140		========================================= */
141		
142	
143	.yokonarabi{
144		display: flex;
145	}
146
147
148	
149		/* ========================================
150			フッター
151		========================================= */
152		
153		
154	footer{
155		width: 100%;
156		height: 55px;
157		background: rgb(47, 47, 47);
158		margin-top: 30px;
159	}
160