I have a problem with my header width on mobile

I want my header to be full-width only on mobile so the logo and the button will be at the edges.

I tried some codes on bas.css but it didn’t work.

what did I do wrong?

@media only screen and (max-width: 767px) {

.header{width: 100%;max-width: 100%;}
}