WEBサイトのレイアウトに躓いています。

前提・実現したいこと

初めてWEBサイトを作っています。2カラムのレイアウトにしたいと思っているのですが、中々上手くいきません。
この方法でなくてもこっちのコードのが分かりやすいよ等のご意見ございましたら、自分では気付けていないのでご教授お願いいたします。

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

.wrapperをbackground-color: #FFC0CB;に設定しているものの、ヘッダー下のみ
白いまま表示されてしまう。

試したこと

ネットで自分なりに2カラムのレイアウトの作り方を調べて、試行錯誤していました。.wrapperの上部は少しスペースを開けたかったので
margin-top: 50px;でしたことで、backgroundcolorがつかないのでしょうか。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href=".css"> <link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css"> <title></title> </head> <body> <header>

    <div class="container">
    <div class="header-left">
        <img class="logo" src="image\www.777logos.com.png">
      </div>
      <div class="header-right">
        <ul>
            <li>
                <a href="#">Body</a>
            </li>
            <li>
                <a href="#">Hair</a></a>
            </li>
            <li>
                <a href="#">Cosme</a>
            </li>
            <li>
                <a href="#">login</a>
            </li>
     </ul>

    </div>

</div>
</header>

<div class="main">
    <div class="contents">

</div>

</div>
<div class="side">
  <div class="box-bdr">


<div class="headerarea">

  </div>

  <img src="image\www.777logos.com.png">


  <p>~Blue rose~ </p>

</footer> </div> </div> </body> </html>

css
1
2@charset "UTF-8";
3@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
4
5* {
6  margin:0;
7  padding:0;
8}
9
10
11  body {
12    font-family: 'Noto Sans JP', sans-serif;
13
14    }
15
16
17/* header */
18
19
20
21header {
22  height: 106px;
23  width:  100%;
24  background-color: rgb(221, 140, 221, 0.3);
25
26
27  border-bottom: 1px solid rgba(25, 25, 112, 0.3);
28}
29
30
31.header-left {
32  float: left;
33  height: 106px;
34}
35
36.header-right {
37  float: right;
38  height: 106px;
39
40
41}
42
43
44
45a {
46  text-decoration: none;
47  display: inline-block;
48  line-height: 106px;
49  text-align:center;
50
51}
52
53
54li {
55  list-style: none;
56  float: right;
57  padding: 0 30px;
58  font-weight: bold;
59
60}
61
62li:hover {
63  background-color: rgba(255, 255, 255, 0.3);
64
65}
66
67.container {
68  width: 1200px;
69  margin: 0 auto;
70  background-color: rgba(255, 255, 255, 0.3);
71}
72
73
74
75
76/* メイン部分 */
77
78
79
80.wrapper {
81
82
83  display: flex;
84  width: 1903px;
85  margin-top: 50px;
86  height: 1300px;
87  background-color: #FFC0CB;
88}
89
90
91
92
93
94
95.main {
96  margin: 0 auto;
97  width: 60%;
98
99}
100.contents {
101  background: white;
102
103  margin: 0 auto;
104
105   text-align: center;
106  color: #8d8d8d;
107  height: 1198px;
108  width: 75%;
109  border: 1px solid #a0d468;
110  border-radius: 10px;
111}
112
113
114.side {
115
116  width: 40%;
117
118
119}
120.box-bdr {
121  text-align: center;
122  padding: 0 15px;
123  border: 1px solid #a0d468;
124  border-radius: 10px;
125  height:1200px;
126  width: 600px;
127  background: white;
128}
129
130
131
132
133
134/* footer */
135
136
137
138
139
140footer {
141  background-color: rgb(150, 44, 44);
142  height: 60px;
143}
144