Buenas tengo un problema usando css grid, al tratar de dar un column gap este se sale del tamaño de pantalla que tengo es decir aparece el scroll horizontal, tengo esto en el css
.container{
margin:auto;
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
column-gap: 10px;
}
.banner-med{
height: 500px;
background-color: salmon;
}
estos son 2 div pero al dar separación no respeta el ancho de pantalla no se si se puede solucionar o que me recomiendan