Hello folks
I tried to design this page for myself:

FIRST PICTURE [What I Want]

And I did, but the problem is my page is kinda stretching. How can I fix it? It looks like this:

SECOND PICTURE [WHAT I've DESIGNED]

But I want it to be just like the first picture. I tried fixing it with testing different "width" and adding "div style", but it didn't help.
here's my code, first HTML and second CSS:

Code:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

<link rel="stylesheet" href="css/page.css" media="screen">

</head>
<body>

<div id="container">

<div id="header">

<div id="header-content-top">
TEST
</div><!-- end #header-content-top -->

<div id="header-content-bottom">
<ul id="social">
 <li><a href="http://www.gmail.com">
	<span style="position: absolute; right: 7px; top: 24px; width: 46px; height: 46px"></span></a></li>
 <li><a href="http://www.yahoo.com">
	<span id="yah" style="position: absolute; right: 3px; top: 25px; width: 46px; height: 46px"></span></a></li>
 <li><a href="http://www.google.com">
	<span id="goo" style="position: absolute; right: -3px; top: 25px; width: 46px; height: 46px"></span></a></li>
 <li><a href="http://www.rss.com">
	<span id="rss" style="position: absolute; right: -8px; top: 25px; width: 46px; height: 46px"></span></a></li>
</ul>
</div><!-- end #header-content-bottom -->

</div><!-- end #header -->

<div id="content">
<p>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
TEST
<br>
</br>
</p>
</div><!-- end #content -->

<ul id="navigation">
 <li><a href="">TEST</a></li>
 <li><a href="">TEST</a></li>
 <li><a href="">TEST</a></li>
 <li><a href="">TEST</a></li>
</ul><!-- end #navigation -->

</div><!-- end #container -->

</body>
</html>
Code:
html,body {
    height:100%;
    margin:0;
    direction:rtl;
font: 16px Tahoma, sans-serif;
 }
#container {
    min-height:100%;
    background-color:#fcdfb3;
    background-image:url(../images/container-bg.png);
    background-size:25% 1px;
    background-position:100% 0;
    background-repeat:repeat-y;
    overflow:hidden;
 }
#header {
    height:213px;
    padding:0 1.5%;
    background-color:#fff;
    background-image:url(../images/header-bg.png);
    background-repeat:repeat-x;
    font-size:200%;
    color:#d68533;
 }
#header-content-top {
    line-height:89px;
    margin-bottom:48px;
 }
#header-content-bottom {
    height:46px;
    padding:15px 0;
 }
#social {
    padding:0;
    margin:0;
    list-style-type:none;
 }
#social li {
    float:left;
    margin:0 2px;
 }
#social a,#social span  {
    position:relative;
    display:block;
    width:46px;
    height:46px;
    font-size:40%;
 }
#social span {
    position:absolute;
    top:0;
    left:0;
    background-image:url(../images/social-bg.png);
 }
#social a:hover {
    opacity:0.6;
 }
#yah {
    background-position:-46px 0;
 } 
#goo {
    background-position:0 -46px;
 }
#rss {
    background-position:-46px -46px;
 }   
#content {
    float:left;
    width:47%;
    padding:1.5%;
    margin:20px 12.5%;
    border-radius:15px;
    box-shadow:inset 0 0 2px  #301409;
    background-color:#ecbd75;
    font-size:100%;
    color:#41251a;
 }
#content h1 {
    text-align:center;
 }
#navigation {
    float:right;
    width:25%;
    padding:0;
    margin:0;
    list-style-type:none;
 }
#navigation li {
    border-bottom:1px solid #d68533;
 }
#navigation a {
    display:block;
    line-height:42px;
    background-color:#41251a;
    font-size:100%;
    color:#d68533;
    text-decoration:none;
    text-align:center;
 }
#navigation a:hover {
    background-color:#d68533;
    color:#41251a;
 }
Thanks