Ich habe hier einen CSS Code der funktioniert. Doch nun ist mir etwas aufgefallen was  ich mir nicht erklären kann.
Wenn man den Browser verkleinert, verkleinert sich die Box in der .mitte so wie sie es soll, aber die Linie, die ich mit BORDER gemacht habe wird auch kleiner, aber sie soll eigentlich weiter 100% über die ganze Seite sein:

Wenn man den Brwoser gross macht, dann funktioniert es, wenn man in klein macht wird die Linie auch klein.

#box{  
border-bottom: 10px solid #ff0000;  
width:100%;  
}	  
  
#box .mitte {  
margin:0 auto;  
min-width:500px;  
max-width:1000px;  
background:#000;  
color:#fff;  
}

Hier kann man es genau sehen.

http://jsfiddle.net/jc9cugtp/1/

Michi