title: Why "Inline-block" doesn't work properly in this CSS?
body: <p>Please check the CSS below.</p>
  
  <pre><code> /*rex is the container of ex,ex2,ex3*/
  div.rex{
  height:200px;
  border:0px;
  margin:60px auto;
  padding: 0;
  vertical-align:top;
  }
  
  div.ex{
  width:34%;
  height:200px;
  background-color:#4f443a;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  }
  
  div.ex2{
  width:0.5%;
  height:200px;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  }
  
  
  div.ex3{
  width:65.5%;
  height:200px;
  background-color:#7e8547;
  display:inline-block;
  margin: 0;
  padding: 0;
  vertical-align:top;
  }
  </code></pre>
  
  <p>The result in browser:
  <img src="https://i.stack.imgur.com/HgbhL.jpg" alt="enter image description here"></p>
  
  <p>What I need:</p>
  
  <p><img src="https://i.stack.imgur.com/VGlNA.jpg" alt="enter image description here"></p>