HTML CSS 横スクロールについて

前提・実現したいこと

HTML CSSにて掲示板システムを作成しようとしているプログラム初心者です。
以下の画像のように複数の画像を横4枚ではなく、8枚くらいに横に羅列し、全体を横スクロールしたいと考えております。
プログラムを記載しておきます。どうかご支援のほど宜しくお願いいたします。

発生している問題・エラーメッセージ

横スクロールができない。
画像単品にスクロールがついてしまっている。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">    
5<title>掲示板システム</title>
6<link href="css/style_board.css" rel="stylesheet">
7  
8</head>
9<body id="photograph">
10  <header>
11      <div class="logo">
12          <a href="index.html">
13            <img src="images/home.png"alt="掲示板システム"></a>
14      </div>     
15  </header>    
16  
17  <div id="wrap" class="clearfix">
18    <div class="content">
19      <h1>掲示板</h1>
20      <p>画像をクリックすることでpdf表示されます.</p>
21        <section id="friend">
22          <h2 class="icon">情報</h2>
23          <ul class="clearfix photograph-list">
24          
25　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
26　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
27　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
28　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
29　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
30　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
31　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
32　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
33　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
34　　　　　　<li><a href="＊＊"><img src="＊＊"width="220px" height="300px" ></a></li>
35        </section>
36    </div>   
37  </div>      
38 </body>
39</html>

css
1@charset "utf-8";
2body{
3  margin: 0;
4  padding: 0;
5  background-color:#8fbc8f;
6  color: #333333;
7  font-size: 15px;
8  line-height: 2;
9  width: 4000px;
10}
11p,h1,h2,h3,h4,h5,h6{
12  margin-top: 0;
13}
14img{
15  vertical-align: bottom;
16  }
17ul{
18  margin: 0;
19  padding: 0;
20}
21a{
22  color: #3583aa;
23  text-decoration: none;
24}
25a:visited {
26  color: #788d98;
27}
28a:hover {
29  text-decoration: underline;
30}
31header{
32  width: 4000px;
33  height: 100px;
34  margin: 0 auto;
35}
36.logo{
37  float:left;
38  margin-top:auto;
39}
40#wrap{
41  clear: both;
42}
43.content{
44  width: 4000px;
45  margin: 0 auto;
46  font-family: 'Bitter', serif;
47}
48h1{
49  font-size: 30px;
50  padding: 0.5em 0.5em;
51  margin: 2em 0;
52  color: #FFF;
53  background: #808080;
54  border-bottom: solid 6px #696969;
55  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
56  border-radius: 5px;
57}
58.main{
59  width: 4000px;
60  margin: 0 10px;
61  float: left;
62}
63#photograph .photograph-list li{
64   white-space: nowrap;
65  width: 4000px;;
66}
67.item{
68  display: inline-block;
69  width: 90%;
70  height: 400px;
71  margin: 16px;
72  font-size: 48px;
73  background: rgba(255, 0, 0, 0.4);
74}
75 a img:hover{
76  opacity: 0.8;
77}