ページ内リンクを配置したらfooterのすぐ上に表示されてしまう

試行錯誤していますが、解決策が現状みつからないのでご教授いただけると幸いです。
画像を横並びで３枚表示させており、その下にページ内リンクを配置するとfooterのすぐ上に表示され上にある画像から広いmarginが空いてしまいます。
お手数をおかけしますが宜しくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="**********">
6<link href="reset.css" madia="all" rel="stylesheet">
7<link href="style.css" media="all" rel="stylesheet">
8<link href="css/sekand.css" media="screen" rel="stylesheet">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width, initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>*******</title>
13</head>
14<body>
15	<div class="wrapper01">
16		/*省略*/
17
18<div class="insyoku-container">
19			<div class="insyoku">
20			<p class="insyokuten1"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
21		</div>
22		<div class="insyoku">
23			<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
24		</div>
25		<div class="insyoku">
26			<p class="insyokuten2"><a href="*****.html"><img src="images/*****.jpg" width="640" height="426" alt="*****"></a></p>
27		</div>
28		</div>
29		<a href="../****/****/****.html">aaaーはこちら</a><br>
30		<a href="../****/****/****.html">bbbはこちら</a><br>
31	</main>
32	<div class="bottom">
33	<footer>
34		<ul class="footer-nav">
35			<li class="footer-nav1"><a href="../../****.html">あああ</a></li>
36			<li>
37		<ul class="footer-nav1">
38			<li class="niretu"><a href="****/****.html">いいい</a></li>
39			<ll class="niretu"><a href="****/****.html">ううう</a></ll>
40			<li class="niretu"><a href="****/****/*****.html">えええ</a></li>
41			<li class="niretu"><a href="****/****/****/****/****.html">おおお</a></li>
42		</ul>
43	</li>
44	<li>
45		<ul class="footer-nav2">
46			<li class="niretu"><a href="../****/****.html">かかか</a></li>
47		</ul>
48	</li>
49	<li>
50		<ul class="footer-nav2">
51			<li class="niretu"><a href="../****/****.html">ききき</a></li>
52		</ul>
53	</li>
54	<li>
55		<ul class="footer-nav2">
56		<li class="niretu"><a href="../****/****.html">くくく</a></li>
57	</ul>
58</li>
59</ul>
60<p class="tyosakuken">&copy;2020 *********** All rights reserved</p>
61	</footer>
62	</div>
63</div>
64</body>
65</html>

CSS
1@charset "utf-8";
2
3body{
4	max-width: 1000px;
5	margin-right:auto;
6	margin-left:auto;
7	height: 100%;
8	.wf-notosansjapanese font-family: "-apple-system","BlinkMacSystemFont","Noto Sans JP","Meiryo","游ゴシック","ヒラギノ角ゴ ProN"sans-serif;
9}
10.wrapper01{
11	width: 100%;
12	min-height: calc(100% - 50px);
13}
14.insyoku-container{
15	display: flex;
16	align-items: center;
17	flex-wrap: nowrap;
18	margin-bottom: 0;
19}
20.insyoku {
21	width: 33%;
22	width: calc(100% / 3);
23}
24.insyokuten1 img{
25	height: 40%;
26	width: auto;
27	margin-top: 20px;
28	margin-left: -180px;
29}
30.insyokuten2 img{
31	height: 40%;
32	width: auto;
33	margin-top: 20px;
34	margin-left: -180px;
35}
36.insyokuten1:hover{
37	opacity: 0.6;
38}
39.insyokuten2:hover{
40	opacity: 0.6;
41}
42.bottom{
43	height:250px;
44	margin-top: 0;
45	padding-top: 5px;
46	line-height: 30px;
47	background-color:#afeeee;
48}
49.footer-nav{
50	list-style-type:none;
51	align-items: start;
52	padding: 5px 15px 20px 15px;
53	margin-bottom: 10px;
54	flex-wrap: wrap;
55	display : -webkit-box;     /* old Android */
56	display : -webkit-flex;    /* Safari etc. */
57	display : -ms-flexbox;     /* IE10        */
58	display : flex;
59}
60.footer-nav1{
61	list-style-type: none;
62	align-items: start;
63	padding: 0 10px 35px 10px
64}
65.footer-nav2{
66	list-style-type: none;
67	align-items: start;
68	padding: 0 10px 15px 10px;
69}
70.tyosakuken{
71	color:#444444;
72	text-align: center;
73	bottom: 0;
74}

cerfweb

2020/11/26 15:22

https://teratail.com/questions/306623 ↑で既に答えていますが、同じ質問じゃないですか？

let

2020/11/29 12:17

ご返信が遅くなり申し訳ありません。質問が複数になった為に回答頂く前に個別に変更していました。ご回答いただいた方法では解決出来ませんでした。

let

2020/11/29 14:56

https://teratail.com/questions/306623で回答いただいた内容ではかいけつしませんでしたが、画像の設定で下にmarginがなくなったので設定可能になりました。ありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

HTMLのclass="insyokuten1"を.insyokuten2に変更。
CSSに
.insyokuten2 img{
height: auto;
width: 80%;
margin-top: 20px;
margin-left:auto;
margin-right: auto;
}
に変更した所下marginが画像に占有されなくなった為、ページ内リンクの設定が可能になりました