una pequeña duda, a la hora de aplicarle gap a el container de contenido, para así crear una separación entre las columnas y filas, ese container se vuelve mas ancho que el resto de conteiners (header y footer) y sale una scrollbar horizontal en la parte de abajo poco estética ![]( )
yo lo solucione aplicando un width menor al 100% para que con le tamaño del width ocupara el 100%
.destaques{
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33.33% 33.33% 33.33%;
height: calc(100vh - 50px);
width: calc(100% - .9rem);
gap: .3rem;
}
mi pregunta es si existe alguna otra forma de corregir esto directamente con la clase gap, sin tener que modificar el width del container.