グリッドレイアウトで最下部のアイテムを正しく表示したい

CSSのグリッドレイアウトを用いてレイアウトを記述しているのですが、最下部のアイテムの横幅が最大(画面いっぱい)まで表示されません。
想定通りに表示するにはどのように修正すればよいでしょうか。

このように表示したい↓

lang
1/* CSSのグリッドレイアウト記述部分 */
2.container {
3    display: grid;
4    grid-column-gap: 60px;
5    grid-row-gap: 30px;
6    grid-template-columns: 240px auto auto auto;
7    grid-template-rows: 90px 165px 60px 525px 90px;
8}
9
10.box1 {
11    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
12    border: solid 1px #6495ed;
13    border-radius: 5px;
14    padding: 15px;
15    font-size: 15px;
16    grid-column: 1 / 5;
17}
18
19.box2 {
20    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
21    border: solid 1px #6495ed;
22    border-radius: 5px;
23    padding: 15px;
24    margin-left: 15px;
25    font-size: 15px;
26    grid-row: 2 / 5;
27}
28
29.box3 {
30    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
31    border: solid 1px #6495ed;
32    border-radius: 5px;
33    padding: 15px;
34    margin-right: 60px;
35    font-size: 15px;
36    grid-column: 2 / 5;
37}
38
39.box4 {
40    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
41    border: solid 1px #6495ed;
42    border-radius: 5px;
43    padding: 15px;
44    margin-right: 60px;
45    font-size: 15px;
46    grid-column: 2 / 5;
47}
48
49.box5 {
50    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
51    border: solid 1px #6495ed;
52    border-radius: 5px;
53    padding: 15px;
54    font-size: 15px;
55}
56
57.box6 {
58    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
59    border: solid 1px #6495ed;
60    border-radius: 5px;
61    padding: 15px;
62    font-size: 15px;
63}
64
65.box7 {
66    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
67    border: solid 1px #6495ed;
68    border-radius: 5px;
69    padding: 15px;
70    margin-right: 60px;
71    font-size: 15px;
72}
73
74/* ---最下部のアイテム--- */
75.box8 {
76    background-image: linear-gradient(to right, #607D8BC7, #5D5D5DC7, #607D8BC7);
77    border: solid 1px #6495ed;
78    border-radius: 5px;
79    padding: 15px;
80    font-size: 15px;
81    grid-column: 1 / 5;
82/*---ここまで
83}

lang
1<!-- HTMLのグリッドレイアウト適用部分 -->
2<div class="container">
3    <div class="box1">box1</div>
4    <div class="box2">box2</div>
5    <div class="box3">box3</div>
6    <div class="box4">box4</div>
7    <div class="box5">box5</div>
8    <div class="box6">box6</div>
9    <div class="box7">box7</div>
10    <div class="box7">box8</div>
11</div>

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

回答1件

ベストアンサー

box8クラスを付与するべき要素にbox7クラスを付与しているためです。
HTMLを以下のように修正してみてください。

HTML
1<div class="container">
2    <div class="box1">box1</div>
3    <div class="box2">box2</div>
4    <div class="box3">box3</div>
5    <div class="box4">box4</div>
6    <div class="box5">box5</div>
7    <div class="box6">box6</div>
8    <div class="box7">box7</div>
9    <div class="box8">box8</div><!-- 修正 -->
10</div>