header - ページの配置

Question

position:fixed の facebook に似たヘッダーを作成したいと思います。ズームアウトすると、ページ全体が中央に配置され、ズームインするとヘッダーもストレッチされます.position:fixed を使用してズームインすると、ウィンドウのスペース不足のために一部のコンテンツが消えます..

<div id="header_line" ></div>
<div id="header">
  <div id="heading_name" ><a href="home.php">Home</a> </div>

<div id="heading_name" style="left:28%;">Advertisement Board</div>
<div id="heading_name" style="left:46%;">Advertise</div>
<div id="heading_name"  style="left:60%;">Sign In</div>
<div id="heading_name"  style="left:76%;">About Us</div>



</div>

<style>


#header_line{
    position:fixed;
    top:0%;
    left:0%;
    width:1370px;
    height:7px;
    z-index:20;
    background-color:#F60;
}
#header{
    position:fixed;
    left: 0px;
    z-index:20;
    top: 7px;
    width:1370px;
    height: 30px;
    background-color:#003;
    border-bottom:thick;
    border-bottom-color:#000;
    box-shadow:2px 5px 5px 1px #033;

    }

</style>