Making hover image responsive - html

Question

I've made it so once you hover over the images on this page they become interactive and show a hyperlink. I've tried my best to make this responsive but for some reason to the left the images are sticking out and creating a gap between the white box and background image.
I would really appreciate it if someone could make an effort to help me out and educate me a little here :) Thank you!
Here's my code
/* Extra small devices (phones, up to 480px) */
#media screen and (max-width: 767px) {
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
}
/* tablets/desktops and up ----------- */
#media (min-width: 992px) and (max-width: 1199px) {
}
/* large desktops and up ----------- */
#media screen and (min-width: 1200px) {
{
font-size: 2.350em;
}
}
body {
width:100%;
margin:0;
padding:0;
max-width:100%;
font-size: 2.175em;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
background: url(http://eyeofthestormproductions.com/css/background.jpg) no-repeat center center fixed;
background-size: cover;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}
.underh {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
}
.team {
text-align: center;
padding-top: 5px;
margin-bottom: 25px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 50px;
margin: auto;
}
.vspacer {
padding-top: 1.875em;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.container-fluid,.row{
width:100%;
margin:0;
padding:0;
max-width:100%;
}
.footertext {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 15px;
color: white;
margin-left: 30px;
opacity: 0.8;
text-align: right;
}
.lastbox {
font-family: 'Oxygen', sans-serif;
font-weight: 100;
font-size: 19px;
text-align: center;
}
.footer {
background-size: cover;
font-family: 'Oxygen', sans-serif;
margin:0;
padding:0;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
padding: 10px 0 10px 0;
}
.boxmain {
background-color: white;
width: 100%;
min-height: 12.500em;
background-size: cover;
max-width: 100%;
margin-bottom: 100px;
padding-bottom: 15px;
}
.logo {
display: block;
width: 75%;
height: 96%;
margin: auto;
max-width: 100%;
margin-bottom: -30px;
}
.navbar .nav > li > a {
color: #F2F4F4;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
font-size: 17px;
text-transform: uppercase;
padding-left: 35px;
text-decoration: none;
letter-spacing: 1px;
}
.navbar-default {
margin-top: 0px;
background: #000;
background: rgba(0,0,0,0.1);
border-color: transparent;
}
#media (min-width: 768px){
.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
.himage {
position: relative;
width: 300px;
border-radius: 15px;
height: 434.5px;
margin: 10px;
float: left;
}
.htext {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
text-align: center;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 17px;
padding-left: 5px;
padding-right: 5px;
}
.hheader {
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 50px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 436px;
text-align: center;
padding-top: 100px;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
}
.upage {
opacity: 0.7;
}
span {
color: white;
}
.servicesimg {
padding-top: 1.250em;
padding-bottom: 2.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.servicesheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.02933333333333em;
font-weight: 300;
font-size: 35px;
}
.underhserv {
font-family: 'Oxygen', sans-serif;
font-weight: 300;
font-size: 95%;
padding-top: 3px;
margin-left: 1.25em;
max-width: 100%;
}
.teamimg {
padding-top: 0.450em;
padding-bottom: 1.188em;
border-radius: 0.625em;
height: auto;
max-width: 100%;
padding-left: 1.25em;
margin-right: 1.25em;
}
.connectsc {
margin-left: 1.25em;
margin-bottom: 15px;
}
.followb {
margin-left: 1.25em;
margin-bottom: -40px;
}
#likebox-wrapper * {
width: 100% !important;
margin-bottom: 5px;
}
.underhcontact {
padding-top: 1.750em;
margin-left: 1.25em;
max-width: 100%;
font-size: 30px;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
}
.pgspacer {
margin-bottom: 60px;
}
.eventpadding {
margin-top: 1.250em;
margin-bottom: 2.188em;
}
.margin1 {
margin-top: 13px;
margin-bottom: 7px;
}
.breadcrumb {
border: 0px solid rgba(245, 245, 245, 1);
background-color: white;
margin-left: 1.25em;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
}
.breadcrumb li {
font-size: 14px;
}
.breadcrumb a {
color: rgba(66, 139, 202, 1);
}
.breadcrumb a:hover {
color: rgba(42, 100, 150, 1);
}
.breadcrumb>.active {
color: rgba(153, 153, 153, 1);
}
.breadcrumb>li+li:before {
color: rgba(204, 204, 204, 1); content: "\002F\00a0";
}
.mediaheading {
margin-top: 0.325em;
font-family: 'Oxygen', sans-serif;
text-align: center;
margin-bottom: 0.7933333333333em;
font-weight: 300;
font-size: 35px;
}
.bottombox {
margin-top: 30px;
}
.caption {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-right: 1.25em;
margin-top: 1.250em;
margin-bottom: 2.188em;
margin-left: 1.25em;
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.imageh:hover + .caption::before {
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
}
.imageh {
position: absolute;
display: block;
height: 100%;
width: 100%;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.imageh:hover + .caption .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__media{
padding-top: 130px;
max-width: 100%;
}
.linkstyle {
padding-top: 20px;
font-family: 'Oxygen', sans-serif;
font-weight: 300;
}
.servicesspace {
margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eye Of The Storm Productions - Services </title>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="description" content="">
<script type="text/javascript" src='jQuery/jquery-1.9.1.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Shadows+Into+Light|Oswald:400,300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<!-- Css -->
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="http://eyeofthestormproductions.com/gettingthere/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>home</li>
<li>artists</li>
<li class="upage">services</li>
<li>events</li>
</ul>
</div>
</nav>
<!-- navbar -->
<img class="logo img-fluid" alt="Eye Of The Storm" src="logo.png">
<div class="boxmain">
<div class="container-fluid">
<div class="row">
<div class="servicesspace"></div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="servicesheading">Producer's & DJ'S</p>
<p class="underhserv">Music is at the heart and core of each one of us, so it is obviously important to us that we represent this through our selection of label DJ’s and Producers.

 Eye Of The Storm hosts 5 DJ acts, and 5 Live acts,
which between them cover a diverse range of cutting-edge EDM.
Psytrance, Progressive Trance, Techno, Minimal, Glitch Hop and
Bass are the primary styles of music we aim to deliver, however we
strive for a unique, innovative sound that connects our heritage and vision.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/livemusic.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Film and Photography</h1>
<p class="underhserv">Our fantastic media and photography crew are some of the best young event photographers in Australia.
With their dynamic and enthusiastic approach behind the lens, each photographer has developed a reputation for beautifully capturing any event in all scenarios.</p>
<br>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/photography.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">OUR MEDIA TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage management</h1>
<p class="underhserv">We offer a professional team of stage managers all with countless hours of on-stage experience.
Working at a wide variety of events has lead to an extensive knowledge of electronic equipment and devices, sound, lighting, communication, organization and authority.
This knowledge and experience makes the Eye Of The Storm stage management team very effective and easy to work with.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagemanagment.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">STAGE MANAGEMENT TEAM</a></h1>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Stage Design and Construction</h1>
<p class="underhserv">Our friends from Fulcrum Designs provide all of our stages, shade sails, projections and 3D mapping.
From small, cost effective staging solutions, through to full size festival fit outs.
We have a number of professional labourers and experienced fabricators who all have helped in large festivals and productions across Australia.
As well as past and current employment in roles such as lighting technician, audio technician, décor, rigging, landscaping, cabinet making, welding, fabricating and hard physical labour.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="http://eyeofthestormproductions.com/gettingthere/stagedesign.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">FULCRUM DESIGNS TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1 class="servicesheading">Graphic Design</h1>
<p class="underhserv">Eye of the Storm Productions works in collaboration with a range of
aspiring graphic designers capable of producing stunning artworks with intricate detail. Our range of
designer allows as to complete pieces and graphics projects very quickly,
regardless of what you need or when you need it, it's not an issue.</p>
<span class="imageh"></span>
<div class="caption img-responsive">
<img src="graphics.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" id="hello" class="caption__media"><a style="color:white;" href="artists.html">GRAPHIC DESIGN TEAM</a></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="footer">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div id="likebox-wrapper">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Feyeofthestormpro&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="footertext">Copyright © 2017 Eye Of The Storm Productions. All Rights Reserved.</p>
<p class="footertext">Website developed by Charlie Fisher</p>
</div>
</div>
</div>
</div>
</body>
</html>
Also I was going to post this question separately but. The hyperlink on the interactive images doesn't work once clicked. I believe that there are some layers that are not allowing it to work. Is there anyway to bring it forward? Thanks!