レスポンシブと固定レイアウトの複合した時の記述について

html&cssについて質問です。
headerはwidth100%、
その下にpxで固定したページを作成しようと思っています。
サンプルでは固定部分は割愛しています。
仮に、割愛しているその下に続く部分の大枠をwidth1000pxと仮定します。
その際に、header内のboxとulを1000pxの両端に置くことは可能でしょうか？
現段階だと、画面いっぱい両端に広がっています。
理想としてはborderだけがはみ出てていて、それ以外は1000pxで留まるようにすることです。
レスポンシブを学び始めたばかりでレイアウトがうまくいかず四苦八苦しています。
どなたか教えていただけると助かります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>デザインカンプ</title>
<link rel='stylesheet' href='css/style.css'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<style>
.container{
 width:100%;
 margin:0 auto;
}
header{
 overflow:hidden;
 padding-bottom:20px;
 border-bottom:5px solid red;
}
/*ボックス(h1画像)*/
.box{
  width:200px;
  height:100px;
  background-color:blue;
  float:left;
}
/*ナビゲーション*/
ul{list-style:none;}
ul#navi{
 float:right;
 padding-top:25px;
}
li.btn{
 float:left;
 padding-right:10px;
}
</style>
</head>

<body>
<header>
<div class='container'>
<h1><div class='box'></div></h1>
<ul id='navi'>
 <li class='btn'>CONCEPT</li>
 <li class='btn'>MENU</li>
 <li class='btn'>ACCESS</li>
 <li class='btn'>CONTACT</li>
</ul>
</div><!--/.container-->
</header><!--header-->
</body>
</html>