CC#27 Misaligned

CC#27ENC: Misaligned

CSS

/* Last Update: 02/24/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(https://images3.alphacoders.com/850/thumb-1920-850836.png);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 100%;
background-color:#444444;
font-family:serif;
text-align:center;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#999999;
border:5px solid #000000;
color:#000000;
}
h2 {
background-color:rgba(255, 255, 255, 0.5);
}

/* CSS MEAT */
.cell {
position:fixed;
top:35%;
height:auto;
width:16.31vw;
}
#i1 {
left:0vw;
}
#i2 {
top:47.5%;
left:16.66vw;
}
#i3 {
left:33.2vw;
}
#i4 {
top:22.5%;
left:49.9vw;
}
#i5 {
left:66.55vw;
}
#i6 {
top:47.5%;
left:83.2vw;
}
.cell img {
z-index:1;
position:relative;
width:100%;
}
.cell h2 {
z-index:2;
position:absolute;
bottom:0%;
left:5px;
right:-5px;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="cell" id="i1">
<img src="IMAGE URL ONE" alt="" class="color"/>
<h2>Your</h2>
</div>

<div class="cell" id="i2">
<img src="IMAGE URL TWO" alt="" class="color"/>
<h2>back</h2>
</div>

<div class="cell" id="i3">
<img src="IMAGE URL THREE" alt="" class="color"/>
<h2>is your</h2>
</div>

<div class="cell" id="i4">
<img src="IMAGE URL FOUR" alt="" class="color"/>
<h2>one big</h2>
</div>

<div class="cell" id="i5">
<img src="IMAGE URL FIVE" alt="" class="color"/>
<h2>blind</h2>
</div>

<div class="cell" id="i6">
<img src="IMAGE URL SIX" alt="" class="color"/>
<h2>spot.</h2>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="CC#27">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>