Tres rayas horizontales en CSS

Creé tres líneas horizontales para crear una bandera extendida que se ejecutará en la parte superior de mi página:

CSS

#main1 div{ width: auto; height: 20px; margin: 0px 

HTML

 

¿Cómo lograr que penetre hasta el borde del navegador? (como en ningún espacio a la derecha o a la izquierda)

Y también hay alguna manera más fácil / mejor que podría haber hecho esto. Ten en cuenta que soy muy novato

¡Su ayuda es muy apreciada! Gracias

Elimine cualquier margin y padding de los elementos html y body , luego use un solo div con un linear-gradient como fondo

Ejemplo: http://codepen.io/anon/pen/rOxEgJ

 html, body { margin: 0; padding: 0 } #flag { height : 100px; width : 100%; background: linear-gradient(to bottom, red 0%, red 33.33%, blue 0%, blue 66.66%, orange 0%); }