コンテンツとサイドメニューが一体化してしまう

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

コンテンツとサイドメニューの背景色を同じにすると、両者が一体化してしまいます。
コンテンツとサイドメニューの境目がわかるように、写真のように両者の間に分け目を入れたいのですが、どのように行えばよいのかがわかりません。

分け目の幅などについては、現時点で細かく決まっているわけではないのでだいたいで構いません。

もしよろしければ、ご教授いただければ幸いです。
どうぞよろしくお願いいたします。

#私のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <meta name="robots" content="noindex,nofollow">
6   <title>ああああああ</title>
7
8   <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10   <link rel="stylesheet" href="stylesheet.css">
11
12   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
13   <script>
14   $(function() {
15      const hum = $('#hamburger, .close')
16      const nav = $('.sp-nav')
17      hum.on('click', function(){
18         nav.toggleClass('toggle');
19      });
20   });
21   </script>
22</head>
23<body>
24   <header>
25      <h1>
26         <a href="/">ああああああ</a>
27      </h1>
28      <nav class="pc-nav">
29         <ul>
30            <li><a href="#">ABOUT</a></li>
31            <li><a href="#">SERVICE</a></li>
32            <li><a href="#">COMPANY</a></li>
33            <li><a href="#">CONTACT</a></li>
34         </ul>
35      </nav>
36      <nav class="sp-nav">
37         <ul>
38            <li><a href="#">ABOUT</a></li>
39            <li><a href="#">SERVICE</a></li>
40            <li><a href="#">COMPANY</a></li>
41            <li><a href="#">CONTACT</a></li>
42            <li class="close"><span>閉じる</span></li>
43         </ul>
44      </nav>
45      <div id="hamburger">
46         <span></span>
47      </div>
48
49	<style type="text/css">
50	.pcolle-parts {
51 	width:100%!important;
52	}
53	</style>
54
55   </header>
56   <div class="main-visual">
57     <div id="wrapper">
58       <div class="left-column">
59         コンテンツ
60
61       </div>
62
63       <div class="right-column">
64         サイドメニュー（サイドバー）
65         
66    </div>
67
68   </div>
69
70   <!-- footer -->
71  <footer>
72    <p>© All rights reserved by ああああああ</p>
73  </footer>
74
75</body>
76</html>
77

CSS
1@charset "utf-8";
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: #e6e6e6;
10   letter-spacing : 0.2em;
11}
12header {
13   padding: 30px 4% 10px;
14   position: fixed;
15   top: 0;
16   width: 100%;
17   background-color: #fff;
18   display: flex;
19   align-items: center;
20}
21h1 {
22   margin: 0; padding: 0;
23   font-size: 20px;
24}
25a {
26   text-decoration: none;
27   color: #4b4b4b;;
28}
29nav {
30   margin: 0 0 0 auto;
31}
32ul {
33   list-style: none;
34   margin: 0;
35   display: flex;
36}
37li {
38   margin: 0 0 0 15px;
39   font-size: 14px;
40}
41.main-visual {
42   display: flex;
43   justify-content: center;
44   align-items: center;
45   height: calc(100vh - 80px);
46   background: url('main_visual.jpg') top center / cover no-repeat;
47}
48h2 {
49   margin: 0;
50   font-size: 30px;
51   font-weight: normal;
52   color: #fff;
53}
54
55.sp-nav {
56   display: none;
57}
58
59@media screen and (max-width: 640px) {
60   .pc-nav {
61      display: none;
62   }
63   .sp-nav {
64      z-index: 1;
65      position: fixed;
66      top: 0;
67      left: 0;
68      width: 100%;
69      height: 100vh;
70      display: block;
71      width: 100%;
72      background: rgba(0, 0, 0, .8);
73      opacity: 0;
74      transform: translateY(-100%);
75      transition: all .2s ease-in-out;
76   }
77   #hamburger {
78      position: relative;
79      display: block;
80      width: 30px;
81      height: 25px;
82      margin: 0 0 0 auto;
83   }
84   #hamburger span {
85      position: absolute;
86      top: 50%;
87      left: 0;
88      display: block;
89      width: 100%;
90      height: 2px;
91      background-color: #4b4b4b;
92      transform: translateY(-50%);
93   }
94   #hamburger::before {
95      content: '';
96      display: block;
97      position: absolute;
98      top: 0;
99      left: 0;
100      width: 100%;
101      height: 2px;
102      background-color: #4b4b4b;
103   }
104   #hamburger::after {
105      content: '';
106      display: block;
107      position: absolute;
108      bottom: 0;
109      left: 0;
110      width: 70%;
111      height: 2px;
112      background-color: #4b4b4b;
113   }
114   /*スマホメニュー*/
115   .sp-nav ul {
116      padding: 0;
117      display: flex;
118      flex-direction: column;
119      justify-content: center;
120      align-items: center;
121      height: 100%;
122   }
123   .sp-nav li {
124      margin: 0;
125      padding: 0;
126   }
127   .sp-nav li span {
128      font-size: 15px;
129      color: #fff;
130   }
131   .sp-nav li a, .sp-nav li span {
132      display: block;
133      padding: 20px 0;
134   }
135   /*-閉じるアイコンー*/
136   .sp-nav .close {
137      position: relative;
138      padding-left: 20px;
139   }
140   .sp-nav .close::before {
141      content: '';
142      position: absolute;
143      top: 50%;
144      left: 0;
145      display: block;
146      width: 16px;
147      height: 1px;
148      background: #fff;
149      transform: rotate( 45deg );
150   }
151   .sp-nav .close::after {
152      content: '';
153      position: absolute;
154      top: 50%;
155      left: 0;
156      display: block;
157      width: 16px;
158      height: 1px;
159      background: #fff;
160      transform: rotate( -45deg );
161   }
162   .toggle {
163      transform: translateY( 0 );
164      opacity: 1;
165   }
166   .main-visual {
167      padding: 0 4%;
168   }
169   h2 {
170      line-height: 1.6;
171      text-align: center;
172   }
173}
174
175footer {
176  width: 100%;
177  height: 80px;
178  text-align: center;
179  padding: 30px 0;
180  background-color: #cab64a;
181}
182.footer-text {
183  color: #fff;
184}
185
186#wrapper {
187    width: 100%;
188    margin: 0 auto;
189    display: flex;
190    flex-wrap: wrap;
191}
192
193.left-column {
194  padding: 30px 4% 10px;
195  width: 80%;
196  box-shadow: 4px 4px;
197  background-color: #fff;
198}
199
200.right-column {
201  width: 20%;
202  box-shadow: 4px 4px;
203  background-color: #fff;
204}
205

Lhankor_Mhy

2020/07/25 04:50

背景色を変えればいいのでは？ボーダーを入れればいいのでは？などと思ったのですが、そういう回答でよいのでしょうか？

yambejp

2020/07/25 05:00

いまのcssをそのまま適用させるとfooterまで横並びになりませんか？

ypk

2020/07/25 05:04

>ボーダーを入れればいいのでは？ご助言ありがとうございます。その発想はありませんでした、、、さっそく、CSSを以下のように修正してみたところ、無事に私がしたいことが実現されました。ありがとうございました。 .left-column { padding: 30px 4% 10px; width: 75%; border: 1px solid #4b4b4b; margin-left: 2%; } .right-column { width: 20%; border: 1px solid #4b4b4b; margin-left: 2%; }

ypk

2020/07/25 05:16 編集

yambejpさんご指摘ありがとうございます。キャッシュをなくして実行してみたところ、確かにその現象を確認しました。フッターまで横並びになってしまっていますね、、、、これでは困りますね、、、どのようにCSSを修正すればよいのでしょうか、、、、先ほどまではこのような現象は発生していませんでした。お手数をおかけしますが、どうぞよろしくお願いいたします。

yambejp

2020/07/25 05:16

divの閉じ忘れがあります。よく確認してみてください

ypk

2020/07/25 05:21

ありがとうございます。確認してみます。