why does my right container slip underneath the left?

NZ_Kiwis

<style>

.container{
margin: 20px;
max-width:1840px;
min-width:840px;
margin: 0px auto;
margin-top:30px;
border:solid 3px #003399;
}

.container-left{
margin:10px;
width:100%;
max-width:1280px;
min-width:330px;
display:inline-block;
vertical-align:top;
margin:0 auto;
background-color:#0C3;
height:200px;
}

.container-right{
margin:0px 10px 10px 10px;
width:480px;
min-width:480px;
display:inline-block;
vertical-align:top;
background-color:#FF0;
height:200px;
}

</style>

cluelessPHP

.container-left{
margin:10px;
width:100%;
max-width:1280px;
min-width:330px;
display:inline-block;
vertical-align:top;
margin:0 auto;
background-color:#0C3;
height:200px;
}

width:100%;

It's setting it to 100% width of .container

Maybe something like this?

https://jsfiddle.net/bf4ouc2k/