Modal background not extending - html

Question

I am having a very strange occurrence when running this Modal as seen below:
<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#reserveModal">
Read more »
</button>
<div id="reserveModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-inline" role="form" id="reservations">
<div class="form-group col-xs-12" style=" margin:10px">
<label for="guests" class="col-xs-3 control-label">
<h4>Number of Guests</h4></label>
<div class="checkbox col-xs-9" id="guests">
<label class="checkbox-inline margin:0 px">
<input type="radio" name="approve" value="">
<strong>1</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>2</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>3</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong>4</strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong> 5 </strong>
</label>
<label class="checkbox-inline">
<input type="radio" name="approve" value="">
<strong> 6 </strong>
</label>
</div>
</div>
<div class="form-group col-xs-12" style=" margin:10px">
<label for="section" class="col-xs-3 control-label">
<h4>Section</h4></label>
<div class="section col-xs-9" id="section">
<input type="radio" name="section" value="" id="nonSmoking">
<label class="nonSmoking checkbox-inline" for="nonSmoking">
<strong>Non-Smoking</strong>
</label>
<input type="radio" name="section" value="" id="smoking">
<label class="smoking checkbox-inline" for="smoking">
<strong>Smoking</strong>
</label>
</div>
</div>
<div class="form-group col-xs-12" style=" margin:10px">
<label for="date time" class="col-xs-3 control-label text-align:right">
<h4>Date and Time</h4></label>
<div class="input-group add-on date datepicker form col-xs-3">
<input type="date" class="form-control date-picker" id="date" />
<div class="input-group-btn">
<button class="btn btn-default">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<div class="input-group form col-xs-2 col-xs-offset-1">
<input type="time" class="form-control" id="time" placeholder="Time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="col-xs-12" margin:10px>
<button type="submit" class="btn btn-primary col-xs-offset-3">Reserve</button>
</div>
</form>
</div>
<!-- /.modal-body -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
For context, I am going through a Coursera class and this is part of one of the assignments. I cannot figure out why the background does not cover the entirety of the modal - only covering the top line or so.
Here is the jsfiddle: https://jsfiddle.net/jacoblhughes/y55uyhfx/2/

Answer 1

Add clearfix class to <form class="form-inline" role="form" id="reservations">
Since you're using col-xs-12 on the form-group items, they're floated to the left, thus the parent form doesn't take on their height. So you need to apply the clearfix to it. If you don't know what clearfix is, I would suggest looking it up.