It's not entirely clear what you're trying to do.
Do you want each of the first five items to fill the width of the screen?
body {
margin: 0;
}
.main {
background-color: rgb(113, 174, 174);
width: calc(494vw + 500px);
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.card {
min-width: 200px;
height: 90vh;
background-color: white;
display: flex;
gap: 2vw;
padding: 2vw;
}
.coluna {
border-radius: 20px;
width: 96vw;
}
#col-1 {
background-color: rgb(252, 229, 229);
}
#col-2 {
background-color: rgb(229, 245, 255);
}
#col-3 {
background-color: rgb(244, 237, 254);
}
#col-4 {
background-color: rgb(244, 237, 254);
}
#col-5 {
background-color: rgb(244, 237, 254);
}
#col-6 {
background-color: rgb(228, 230, 239);
width: 500px;
}
Demo[
^]
Or do you want the first five items to appear at once, and the sixth to be pushed off the edge of the screen?
body {
margin: 0;
}
.main {
background-color: rgb(113, 174, 174);
width: calc(102vw + 500px);
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.card {
min-width: 200px;
height: 90vh;
background-color: white;
display: flex;
gap: 2vw;
padding: 2vw;
}
.coluna {
border-radius: 20px;
width: calc(calc(100vw - 12vw) / 5);
}
#col-1 {
background-color: rgb(252, 229, 229);
}
#col-2 {
background-color: rgb(229, 245, 255);
}
#col-3 {
background-color: rgb(244, 237, 254);
}
#col-4 {
background-color: rgb(244, 237, 254);
}
#col-5 {
background-color: rgb(244, 237, 254);
}
#col-6 {
background-color: rgb(228, 230, 239);
width: 500px;
}
Demo[
^]