HTML/CSS并排对齐“内联块”元素的问题

Question

请参阅我在下面的链接中创建的codepen。代码也在下面。

http://codepen.io/cjpicc11/pen/xRWvaR/

你会发现，块1及块2没有正确对齐到主容器元素的顶部，我想不通为什么。我正在考虑设置两个块，因为内联块应将它们设置为并排排列。

任何帮助将不胜感激。

代码HTML

 <div class="MainContainer"> 
     <div class="MainContentContainer"> 
     <div id="ValuesBlock"> 
      <h1 class="BlockHeader"> 
       Block 1 
      </h1> 
      <h2>What is Lorem Ipsum?</h2> 
      <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3> 
      <div class="Spacer"> 
       &nbsp; 
      </div> 
      <h2>Where does it come from?</h2> 
      <h3>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</h3> 
      <div class="Spacer"> 
       &nbsp; 
      </div> 
      <h2>Where can I get some?</h2> 
      <h3>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</h3> 
     </div> 
     <div id="UpcomingEventsBlock"> 
      <h1 class="BlockHeader"> 
       Block 2 
      </h1> 
      <p>It is a long established fact that a reader will be distracted by the </p><br> 

     </div> 
     </div> 
    </div> 

代号CSS

.MainContentContainer{ 
    position:relative; 
    display:block; 
    /*background-color:#F0F0F0;*/ 
    background-color:#FFF; 
    height:80%; 
    width:80%; 
    border-radius: 3px; 
    box-shadow: 0px 7px 45px #888888; 
    margin: 0 auto; 
    border-style: solid 2px; 
    padding:45px; 
    color:#484848; 
} 
#ValuesBlock{ 
    position:relative; 
    display:inline-block; 
    background-color:#FFF; 
    margin-left:3px; 
    border-radius: 7px; 
    box-shadow: 0px 7px 45px #888888; 
    width:60%; 
    padding:10px; 
} 
h1.BlockHeader { 
    position: relative; 
    display: block; 
    background-color: #103B58; 
    text-align: center; 
    color: #FFF; 
    width: initial; 
    /* margin: 0 auto; */ 
    /* padding: 5px 5px 5px 5px; */ 
    /* margin: -9px 10px 36px 1px; */ 
    border-radius: 7px 7px 0 0; 
    /* margin: -10px -5px -5px -5px; */ 
    margin-top: -10px; 
    margin-left: -10px; 
    margin-right: -10px; 
    padding-right: 0px; 
    height: 32px; 
    padding: 21px; 
    } 
    #UpcomingEventsBlock{ 
    position:relative; 
    display:inline-block; 
    background-color:#FFF; 
    margin-left:0px; 
    border-radius: 7px; 
    box-shadow: 0px 7px 45px #888888; 
    width:30%; 
    padding:10px; 
    } 
.footer{ 
    position: relative; 
    bottom: 0; 
    width: 100%; 
    padding: 25px; 
    text-align:center; 
    font-size: 0.8em; 
    font-style: italic; 
} 

Answer 1

这个工程：

vertical-align: top;