containerだけでなく画面いっぱいに背景色を付けたい

前提・実現したいこと

下のNEWSのみ背景色を画面いっぱいしたい

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

エラーメッセージ

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
9    <link rel="stylesheet" href="rennshuu.css">
10    <title>Document</title>
11</head>
12<body>
13    
14  <div class="container">
15    　　 <div class="main2">
16         　<div class="lavel">
17        　 <h1>PRODCT</h1>
18         　<a href="#">More</a>
19      　　 </div>
20 
21      <div class="container padding: 10px;">
22       <div class="row align-items-start justify-content-center margin-left: 0; margin-right: 0; ">
23         <div class="col-md-4 w-25 h-25  photo">
24           <a class="link" href="#">
25           <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
26           <p>テキスト</p>
27           </a>
28         </div>
29           <div class="col-md-4  w-25 h-25  photo">
30             <a  class="link" href="#">
31          <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
32          <p>テキスト</p>
33             </a>
34         </div>
35         <div class="col-md-4 w-25 h-25 photo">
36           <a class="link" href="#">
37           <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
38           <p>テキスト</p>
39           </a>
40         </div>
41       </div>
42       <div class="row align-items-center justify-content-center">
43         <div class="col-md-4 w-25 h-25 photo">
44           <a class="link"  href="#">
45           <img d-block mx-auto img-fluid src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
46           <p>テキスト</p>
47           </a>
48         </div>
49         <div class="col-md-4 w-25 h-25 photo">
50           <a class="link" href="#">
51          <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
52          <p>テキスト</p>
53          </a>
54         </div>
55         <div class="col-md-4 w-25 h-25 photo">
56           <a class="link" href="#">
57          <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
58          <p>テキスト</p>
59          </a>
60         </div>
61       </div>
62     </div>
63 
64 
65     
66     <div class="main3">    
67       <div class="lavel">
68          <h1>NEWS</h1>
69          <a href="#">More</a>
70       </div>
71     
72 
73       <div class="container-fluid">
74         <div class="row align-items-start justify-content-center">
75          <div class="col-md-2">
76           One of three columns
77          </div>
78          <div class="col-md-2">
79           One of three columns
80          </div>
81        </div> 
82        <div class="row align-items-start justify-content-center">
83          <div class="col-md-2">
84          One of three columns
85           </div>
86           <div class="col-md-2">
87          One of three columns
88           </div>
89        </div> 
90        <div class="row align-items-start justify-content-center">
91           <div class="col-md-2">
92           One of three columns
93           </div>
94          <div class="col-md-2">
95           One of three columns
96          </div>
97         </div> 
98         <div class="row align-items-start justify-content-center">
99          <div class="col-md-2">
100           One of three columns
101          </div>
102          <div class="col-md-2">
103           One of three columns
104          </div>
105        </div> 
106        <div class="row align-items-start justify-content-center">
107          <div class="col-md-2">
108           One of three columns
109          </div>
110          <div class="col-md-2">
111           One of three columns
112          </div>
113        </div> 
114        <div class="row align-items-start justify-content-center">
115           <div class="col-md-2">
116           One of three columns
117          </div>
118          <div class="col-md-2">
119           One of three columns
120          </div>
121        </div> 
122       </div>
123     </div>
124 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
125</body>
126</html>
127

CSS
1*{
2   padding: 0;
3   margin: 0;
4}
5
6.main2 {
7   padding-top: 30px;
8   height: 500px;
9}
10
11.lavel {
12   height: 30px; 
13   margin-bottom: 100px;
14   margin-left: 50px;
15}
16.lavel h1 {
17   float: left;
18   
19}
20
21
22.lavel a {
23   float: right;
24   margin-right: 50px;
25   border: solid 1px black;
26   padding: 10px 20px;
27   text-decoration: black;
28   color: black;
29}
30
31.link a:hover{
32   background-color: black;
33   color: white;
34}
35
36.contens {
37   margin-top: 50px;
38}
39
40.photo {
41   display: block;
42   text-align: center;
43}
44
45.photo img {
46   border-radius: 0 20px 20px 0;
47   box-shadow:  2px 2px 2px 1px rgba(0, 0, 166, .2);
48   width: 150px;
49   height: 200px;
50}
51
52.photo img+p {
53   margin-top: 10px;
54   padding-bottom: 10px;
55   font-size: 20px;
56   font-weight: bold;
57  
58}
59.link {
60   text-decoration: none;
61}
62.photo:hover {
63   opacity: 0.5;
64}
65.photo a p{
66   color: black; 
67}
68
69
70.main3{
71   padding-top: 30px;
72   height: 700px;
73   width: 100%;
74   background-color: darkcyan;
75}