HTML not displaying properly

Hi!

I am trying to add some links and images to my page using div. However, it is not properly.

This is what i have:

http://52.36.1.150/index.php/none/

HTML and CSS are as follows:

<style type="text/css">
.wrapper-main {
  display: table;
  width:100%;
  max-width:980px;

}
.wrapper-main a {
  display: table-cell;
  width: 50%;
  text-align: center;
  vertical-align: middle;
}
.wrapper-main a:hover {
  background-color: #e0e0eb;
}
</style> 

<div align="center" class="wrapper-main">
  <a href="http://www.google.com/">ROW 1</a>
<img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="http://www.google.com/">ROW 2</a>
</div>

<div class="wrapper-main">
  <a href="http://www.google.com/">ROW 3</a>
<img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="http://www.google.com/">ROW 4</a>
</div>

<div class="wrapper-main">
  <a href="http://www.google.com/">ROW 5</a>
<img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="http://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="http://www.google.com/">ROW 6</a>
</div>

As you can see, there are gaps and odd blue lines between every two row.

What I want to achive is like this:

https://www.dropbox.com/s/4k14mdgllxn4v9t/none.html

Why there is such difference between just plain html page and wordpress page?

How can I solve this?

Thanks!