I have two divs in my page end I want to center the second one between the first and the end ofthe page. Something like this:

```
|   |          | |    | | 
|   |          | |    | |
|   |   div1   | |div2| |
|   |          | |    | |
|   |          | |    | |

```

"Div 2" is supposed to be centered between "div 1" and the end of the page. I tried everything I know and nothing worked.

My HTML:

```
    <!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="teste.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="teste.js"></script>

    <title>Example</title>
</head>

<body>

    <div id="header">
        <div class="title"">Example</div>
    </div>

    <div id="main-body">
        <ul class="nav-tabs">
            <li class="active-tab"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
        </ul>

    </div>

    <div id="right-menu"></div>

    <footer>
    </footer>

</body>

</html>

```

And my CSS:

```
/* Fonte Nunito a ser usada no título */
@import url(http://fonts.googleapis.com/css?family=Nunito);

/*----------------------------------------------*/

/* Cor do fundo da página */
body {
    background-color: #cccccc;
}

/*----------------------------------------------*/

/* Header */

/* Cor e tamanho */
#header {
    background-color: #669966;
    background-size: cover;
    height: 100px;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Título */
#header .title {
    color: #cccccc;
    font-family: Nunito;
    font-size: 50px;
        font-style: italic;
        line-height: 46px;
    left: 60px;
        top: 30px;
    position: absolute;
}

/*----------------------------------------------*/

/* Tabs */
.nav-tabs {
    background-color: #cccccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Tab cells */
.nav-tabs li {
    background-color: gray;
    color: white;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;

}

/* Tab ativa */
.active-tab {
    background-color: white;
    color: red;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

/*----------------------------------------------*/

/* Main body (this is "div 1")*/

#main-body {
    background-color: white;
    height: 100vh;
    width: 900px;
    margin: 5px 0 5px 100px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Menu à direita(this is "div 2") */

#right-menu {
    border: 2px solid red;
    background-color: yellow;
    height: 30px;
    width: 50px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Footah */

footer {
    background-color: #333333;
    height: 200px;
    width: 100%;
    margin: 0;
    padding: 0;
}

```

Can someone help please?

**[EDIT]**
Thank you everyone who posted your solutions. The problem was solved!