Hola que tal, pues estoy haciendo una pagina web pero tengo un problema con un capa, es un header, no un div, disculpen por el titulo, el problema esta en que al momento de redimensionar la ventana del navegador, la capa del header se hace de menor tamaño y queda muy feo, les pongo una imagen de como queda:



y la parte de fondo negro es el que se supone que deberia estar a todo lo ancho pero al redimensionar la pagina, esta cambia de tamaño.

el codigo lo tengo de esta manera:

header{
background: #212121;
box-shadow: 0px 1px 2px #212121;
height: 30px;
width:100%;
}


lo intente con position: fixed, este es el unico que me a funcionado, pero se queda por encima de todos los objetos.
alguien podria decirme como lo puedo acomodar, sin utilizar @media ?