画像に対するcssのやりかた

画像に当てるcssができません。
main-topの大きな画像と下の6この画像に白枠線を入れたいです。
そして、下の6この画像の感覚も広げたいです。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<link rel="stylesheet" href="./css/reset.css">
8<link rel="stylesheet" href="./css/style.css">
9<title></title>
10<head></head>
11<body>
12  <div class="top">
13  </div>
14  <div class="wrapper">
15    <div class="header">
16        <img src="./img/logo.jpg" >
17      <div class="header-list">
18      <ul>
19        <li>ホーム</li>
20        <li>自己紹介</li>
21        <li>作品</li>
22        <li>お問い合わせ</li>
23      </ul>
24      </div>
25      </div>
26      <div class="main">
27        <div class="main-top">
28          <img src="./img/hero.jpg" >
29          <img src="./img/shadow.jpg">
30          <h1>世界中を旅するフォトグラファーです。</h1>
31        </div>
32        <div class="main-bottom">
33        <div class="main-left">
34          <h4>最新の作品</h4>
35          <div class="picture-list">
36            <ol>
37              <li><img src="./img/thumb1.jpg" ></li>
38              <li><img src="./img/thumb2.jpg" ></li>
39              <li><img src="./img/thumb3.jpg" ></li>
40            </ol>
41            <ol>
42              <li><img src="./img/thumb4.jpg" ></li>
43              <li><img src="./img/thumb5.jpg" ></li>
44              <li><img src="./img/thumb6.jpg" ></li>
45            </ol>
46        </div>
47        </div>
48        <div class="main-right">
49          <h4>自己紹介</h4>
50          <p>
51            こんにちは、Manaです。世界中を
52            旅しながら写真を撮っています。
53            <a href="https://twitter.com/login?lang=ja">Twitter</a>や<a href="https://twitter.com/login?lang=ja">Facebook</a>
54            やってます。
55            お気軽にフォローしてください！
56            <a href="https://twitter.com/login?lang=ja">ブログ</a>もチェックしてみてくださ
57            い。これはデモサイトです。実際
58            は写真苦手です。はい。
59            こんにちは、Manaです。世界中を
60            旅しながら写真を撮っています。
61            TwitterやFacebookやってます。
62            お気軽にフォローしてください！
63            ブログもチェックしてみてくださ
64            い。これはデモサイトです。実際
65            は写真苦手です。はい。
66          </p>
67        </div>
68        </div>
69      </div>
70      <div align="center">
71        <img src="./img/スクリーンショット 2019-10-03 21.31.07.jpg ">
72      </div>
73    </div>
74</body>
75</html>

CSS
1body{
2  width: 1200px;
3  background-color: #FFEFD5;
4}
5
6.top {
7   height: 20px;
8    background-image:url(/Users/kabayama/Front-Curriculum/Front-Curriculum/kadai_PC/kadai_01/img/bg.jpg );
9    background-repeat: repeat-x;
10    margin-bottom: 40px;
11}
12
13.wrapper{
14  margin:0  auto;
15  width: 1000px;
16}
17
18.header{
19  height: 100px;
20}
21
22.header-list{
23  float: right;
24  padding-top: 35px;
25}
26
27.header-list li{
28  float: left;
29  margin-right: 48px;
30  color: #AAAAAA;
31}
32
33.main-top h1{
34  color: #AAAAAA;
35}
36
37.picture-list ol {
38  display: flex;
39}
40
41.picture-list > li {
42  margin-left: 10px;
43  border: 5px #ff0000 solid;;
44}
45
46
47.clearfix::after {
48    content : " ";
49    display : block;
50    clear : both;
51}
52
53img[src$="./img/logo.jpg"] {
54
55}
56
57.main{
58  margin: 40px 0px;
59}
60
61.main-top{
62  border-style: solid;
63border-width: 5px;
64border-image-source: url(/Users/kabayama/Front-Curriculum/Front-Curriculum/kadai_PC/kadai_01/img/bg.jpg );
65
66
67}
68
69.main-bottom{
70  display: flex;
71}
72
73.main-left{
74  width: 650px;
75}
76
77.main-left h4{
78  color: #AAAAAA;
79}
80
81
82
83.main-right{
84  float: right;
85  width: 230px;
86  color: #AAAAAA;
87}