如何在CSS3上使div等距？

Question

我试过四处寻找，我找到的是一组并排相同大小的div，或者太复杂以适应我的情景。

我有一个带有主div和图像div的容器div。主div包含一个带文本的大蓝框，而图像div包含两个不同大小的堆叠图像。我希望主div，图像div和页面右边之间的距离保持不变，同时确保主div调整大小以不越过侧边栏。

所有代码都在此代码中：https://codepen.io/1s2s2p/pen/rdJawE

缩短代码：

HTML：

<div id="container">
    <div id="image4">
        <img style="width: 80%; height: 80%;" src="https://achievement-images.teamtreehouse.com/badges_intro_to_html_css_stage-01.png">
    </div>
    <div id="image5">
        <img style="width: 80%; height: 80%;" src="http://wwwcdn.howdesign.com/wp-content/uploads/HTML5-CSS31.jpg">
    </div>
    <div class="main">
        <!--Lot of text here-->
    </div>
</div>

CSS：

.main {
    padding: 21px 6px 6px;
    font-weight: bold;
    background-color: #66cccc;
    float: right;
    clear: both;
    display: block;
    visibility: visible;
    z-index: 0;
    width: 58%;
    position: relative;
    top: 167px;
    left: -214px;
}

.images {
    margin-right: auto;
    margin-left: auto;
    right: 8px;
    padding-top: 156px;
    position: absolute;
}

我有一个images2 div，使用方法相同但图像不同。