Como sugerencia en esté código:
@media screen and (min-width: 1024px) {
.container {
padding-left: calc((100% - 940px)/2);
padding-right: calc((100% - 940px)/2);
}
}
Como se está usando la propiedad padding pero solo en el sentido horizontal, existe el padding-inline, que es una propiedad CSS para agregar un espacio a los lados. Quedaría algo así:
@media screen and (min-width: 1024px) {
.container {
padding-inline: calc((100% - 940px)/2);
}
}
Realmente este es un Shorthand. Con lo que se pueden hacer cosas como esta: padding-inline: 5% 10%;.
Los invito a leer más en esta documentación.
