Why is this div completely broken? - html

Question

I have no idea whats going on here. Have a form contained in a div, and the div has a background color.
It works on one part of my website, but just doesn't work at all on another. Here's a Jsfiddle of whats going on
Also the affected code posted here:
form {
text-align: center;
}
input {
font-family: 'Cabin', sans-serif;
}
.submit-button {
text-decoration: none;
width: 80%;
background-color: white;
text-align: center;
height: 35px;
border-radius: 10px;
display: inline-block;
}
.input-half {
width: 40%;
display: inline-block;
float: left;
margin-left: 5%;
margin-right: 5%;
}
.input-half-2 {
width: 40%;
display: inline-block;
float: right;
margin-left: 5%;
margin-right: 5%;
}
input[type=text]:focus {
background-color: lightblue;
}
.contact-contain {
background-color: lightgray;
max-width: 100%;
}
.image-back {
width: 100%;
}
#back-img {
width: 100%
}
.cont-textarea {
resize: none;
width: 80%;
height: 110px;
}
<div class="contact-contain" id="link-c"><br>
<h1>Contact Over The Horizon:</h1><br><br>
<form>
<div class="input-half">
<label for="contname">Your Name</label><br>
<input class="input-box" type="text" name="contname"><br>
<label for="eaddress">Your Email</label><br>
<input class="input-box" type="text" name="eaddress"><br>
<label for="subj">Message Subject</label><br>
<input class="input-box" type="text" name="subj">
</div>
<div class="input-half-2">
<label for="contactmsg">Message Content</label><br><br>
<textarea class="cont-textarea"></textarea><br><br>
<button class="submit-button" type="submit" name="submitq" value="Send"><span>Submit Quote</span></button><br>
</div>
</form>
</div><br>

Answer 1

Wild guess: You want your div to contain your form (which has zero height). Do this:
.contact-contain {
overflow: hidden;
}
Demo

Answer 2

Trust me you will get better with time, but I think, to achieve what you want you can simply set a custom body background-color like this
body {background-color: lightgray;}
and you should be good