I have a problem with my site. When I resize the window everything stays still and doesn't move, the window just crosses over everything.

Here are the images to epxlain it a bit better.. hopefully.

This is the site in normal window - http://imageshack.us/photo/my-images/407/problem2a.jpg/

and when resized - http://imageshack.us/photo/my-images/696/problemim.jpg/

Can anyone tell me what the problem is? I would like my layout to work like this website - http://www.thisoldbear.com/

-----EDIT-----

body {
width: 1400px;
-ms-overflow-x: hidden;
overflow-x: hidden;
background: url(../../core/images/bg.png);
font-family: 'Pontano Sans', sans-serif;
}
#logo {
background: url(../../core/images/logo.png);
width: 124px;
height: 171px;
margin: -86px 185px;
}
nav {
margin: 0 300px;
}
a {
text-decoration: none;
font-size: 17px;
color: #f4f4f4;
    outline: none;
padding-left: 50px;
}
a:hover {
text-decoration: underline;
}
p {
font-size: 22px;
color: #444;
}
h2 {
font-size: 29px;
color: #444;
}
header {
background: url(../../core/images/header.png);
padding: 32px;
margin: -8px -8px;
}
.content {
padding: 10px;
width: 700px;
border-top: 4px solid #d55d58;
margin: 100px 200px;
}
.break {
margin: -50px 0;
}