html - Centering header (includes logo & navigation) -

I am working on top of a website. I have looked around stack overflow for instructions on how to focus on the header (including logo and navigation bar).

I am using Dreamweaver CC and when I click on the preview button, it focuses on the browser, but there is more white space on the right hand side.

My current CSS:

 . Container {width: 1000px; Margin-right: auto; Margin-left: auto; Text align: center; }. Header_left {float: left; Width: 300px; } .navi {float: right; Width: 600px; }. Navi li {list-style: none; Display: Inline; }   
 My current HTML:  
  & lt; Body id = "home" & gt; & Lt; Div id = "header" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "header_left" & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../ Images / BestFoodServicesByb 044.jpg" width = "208" height = "69" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "header_right" & gt; & Lt; Ul class = "navi" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../ Images / BestFood Servesizfz 7. JPG" width = "88" height = "56" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../ Images / BestFoodSwiseJaya 9.JPG" width = "88" height = "56" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../ Images / BestFoodServiceWeb_11.jpg" width = "88" height = "56" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../ Images / BestFoodSwiceWeb_13.jpg" width = "88" height = "56" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div style = "clear: both" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Edit:   
 
 
 trying to understand the problem is. Header is centered as a whole, after specifying the width on the images elements have margin issues and then also give the class a different width. You can remove the width in the class and it will push each specified element flush to the specified sides. Then add the margin to push the distance you want from:  
  body, html {width: 100%; Height: auto; Margin: 0; }. Container {background: # 333; Width: 1000 pixels; Margins: Auto; Text align: center; }. Header_left {float: left; Margin-left: 70px; Margin-top: 12px; } .navi {float: right; Margin-right: 60px; }. Navi li {list-style: none; Display: Inline; }