Template / CSS Question

I am majorly blanking. I am setting multiple images on a template. Everytime I zoom into the page everything stock that I have not added to the template looks great, but the below just looks terrible. If I add the same 3 images as a row using DIV within a post as you zoom the change rows and it looks great, but not when I add the below code into the template file.

<div id="projectGrid" style="position: relative; height: 100%;">
<div class="projitem" style="position: absolute; left: 0px; top: 40px;">
<div class="projitemCont filmitem">
<a class="projthumbIm" href="" style="background-image: url(..websitehere.jpg); height: 100%px;" ></a>
<h3><a href="">TEXT HERE</a></h3>
<p class="postDate" style="padding-bottom: 2px !important;">2015</p>
<div class="projitem" style="position: absolute; top: 40px;">
<div class="projitemCont filmitem">
<a class="projthumbIm" href="" style="background-image: url(..nextwebsitehere.jpg); height: 100%px;" ></a>
<h3><a href="">TEXT HERE</a></h3>
<p class="postDate" style="padding-bottom: 2px !important;">2014</p>
</div>
#CSS
#projectGrid {
	padding-top:40px;
	margin-bottom:30px
}
.projitem {
	width:25%;
	margin:0!important;
	display:block
}
.filmitem {
	min-height:355px!important
}
.projitemCont {
	margin:20px;
	background:#1b1b1b;
	font-family:Lato,sans-serif;
	border:1px solid #000;
	min-height:580px
}
.projthumbIm {
	display:block;
	width:100%;
	height:120px;
	background-size:cover
}