title: How do I get the top of columns to line up properly using the inline-block display?
body: <p>I've looked around to no avail. I'm really new to CSS so this might be something simple. Essentially I have 4 columns that stretch across a page, and for whatever reason they tops of columns 2 and 4 are higher than the other two. There are 2 links per column.</p>
  
  <p>Here is the code.</p>
  
  <pre><code>ul {
  width:240px;
  list-style-type:none;
  float:left;
  padding-left:0px;
  padding-right:0px;
  margin-left:0px;
  margin-right:0px;
  }
  
  li {
  text-align: center;
  
  }
  
  .links {
  height: 250px;
  width: 1000px;
  top: 0px; left: 0px;
  margin-top: 9px;
  position: absolute;
  //-moz-column-count: 4;
  column-count: 4;
  display: inline-block;
  }
  
  a {
  text-decoration: none;
  font-family: 'haxr';
  font-size: 30px;
  height: 250px;
  line-height: 30px;
  color: #3b3b3b;
  }
  
  a:hover {
  transition: color 0.4s ease;
  color: #ff1957;
  transition: font 0.15s ease;
  font-size: 40px;
  }
  </code></pre>
  
  <p>Someone tell me what I'm doing wrong please!</p>