HTML and CSS formatting problem

[Epixam]

I'm learning to develop with ruby on rails and I'm having some problems with HTML and CSS. (which I thought would be the easiest part) For some reason I cannot get the test div to do what I want.

I'm trying to make a webpage that will dynamically adjust to the size of the users device. Right now it seems like it works (the hight will change based on the size of the browser window), the problem is I cannot reposition anything inside of main_content? As you can see I tried making a div and assigning it a left position and it doesn't want to do anything... What am I doing wrong?

The following is an example. (index.html.erb)

<div id="container">
    <div id="nav_bar">
    </div>

    <div id="main_content">
        <div id="test">
            derp
        </div>
    </div>
</div>

(index.css.scss)

$font_family: "Lucida Console", Monaco, monospace;
$primary_color: #333;
$background_color: #AAAAAA;
$red: #ff0000;
$green: #00ff00;
$blue: #0000ff;

html, body {
    height: 98%;
    margin: 0;
    min-height: 98%;
    padding: 0;
    background-color: $background_color;
}

#container {
     width: 800px;
     margin: 0 auto;
     height: 100%;
     background-color: $red
}

#nav_bar{
  float: left;
  height: 50px;
  width: 800px;
  background-color: $red
}

#main_content{
  width:100%;
  height:100%;
  background-color: $blue
}

#test{
  left:1200px;
}

I'm trying to make a webpage that will dynamically adjust to the size of the users device

In this case you want to develop a responsive site? The usual way would be to use media queries with set breakpoints.