*tl;dr* - How can I center the blue `div` found in the third image in the white space, not the page?

I've been experiencing quite the headache recently. I've created a website with two distinct columns, but, is achieved with only one `div` element. This can be seen below. 

![Two columns on the page.](https://i.stack.imgur.com/O5HPt.png)

It's pretty obvious from the picture that the first column is to be regarded as a sidebar, and hence, has the class `.sidebar`. `.sidebar` has a fixed `width` property of `400px`. The rest of the page is simply the rest of the `div` with the class `.container`, which extends to `100%` on both its `width` and `height`
properties. As I would image this is hard to image from just reading this text, I've found a way to illustrate how the page is setup.

![Setup Image](https://i.stack.imgur.com/JpVFa.png)

1. Gray is the `html` element.
2. White is the `body` element.
3. The aqua on white is the `div` with the class `.container`.
4. The following aqua is the `div` with the class `.sidebar`.

Let's now insert the `div` that's giving me issues.

![New Div](https://i.stack.imgur.com/R2DQg.png)

As you can see, a single blue `div` has been added. This has the class `.test`, and which simply sets the `width`, `height`, and `margin` properties. As you can now see, when the `margin` is set to `0 auto`, the `div` is centered to the window and not the white space. Obviously this is the expected action.

The issue I'm facing is that I have no idea how I can center the blue `div` in the white space. I'm not sure how I would create anything the exact width of the white space, and hence, don't know how `margin: 0 auto` would be any use. How would I center my test element in the white space? Can this be achieved through CSS and HTML?

---

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
    </div>
    <div class="container">
        <div class="side-bar">
            <div class="temp-logo"></div>
            <ul class="nav">
                <li class="nav-button-disabled">About</li>
                <li class="nav-button-disabled">GitHub</li>
                <li class="nav-button-disabled">Contact</li>
            </ul>

            <a href="https://www.codekaufman.com/support/"><div class="emphasis-button-disabled">Support</div></a>
            <div class="legal">Copyright &copy; 2015 Jeffrey Kaufman. All Rights Reserved.</div>
        </div>

        <div class="test"></div>

    </div>
</body>
</html>

```

---

```
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    font-family: "Raleway", sans-serif;
    color: #000;
}

html, body {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    height: 100%;
}

.side-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 100%;
    background: #EEE;
}

.temp-logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 150px;
    background: #000;
}

.nav {
    width: 200px;
    margin: 0 auto;
    margin-top: 75px;
    list-style-type: none;
}

.nav-button {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.6em;
    cursor: pointer;
    transition: 0.5s;
}

.nav-button:hover {
    margin-left: 20px;  
}

.nav-button-disabled {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.6em;
    cursor: default;
    color: #AAA;
}

.nav-category {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 2em;
    cursor: default;
    border-bottom: 1px #000 solid;
}

.emphasis-button {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    left: 138px;
    line-height: 45px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #C30;
    color: #C30;
    transition: 0.4s;
    cursor: pointer;
}

.emphasis-button-enabled {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    left: 138px;
    line-height: 45px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #C30;
    transition: 0.4s;
    cursor: pointer;
    color: #EEE;
    background: #C30;   
}

.emphasis-button-disabled {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 45px;
    line-height: 45px;
    left: 138px;
    bottom: 70px;
    border-radius: 5px;
    border: 1px solid #AAA;
    color: #AAA;
    cursor: default;
}

.emphasis-button:hover {
    color: #EEE;
    background: #C30;   
}

.legal {
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    font-size: 0.85em;
    text-align: center; 
    width: 400px;
    height: 20px;
    left: 0;
    bottom: 20px;
}

.test {
    width: 600px;
    height: 200%;
    background: blue;
    margin: 0 auto;
}

```