Bootstrap Mulitselect - Constrained Width

Width exceeds Container

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<div class="col-sm-4 well">
    <form accept-charset="UTF-8" action="" method="POST">
        <textarea class="form-control" id="text" name="text" placeholder="Type in your message" rows="5"></textarea>
        <h6 class="pull-right" id="count_message"></h6>
        <button class="btn btn-info" type="submit">Post New Message</button>
    </form>
</div>


<form action="" method="post" >
    <div class="form-group col-md-6">                                
        <label id="messageLabel" for="message">You Text content </label>
        <textarea class="form-control input-sm" type="textarea" id="message" 
            placeholder="Text goes here" maxlength="150" rows="8"></textarea>
        <span class="help-block">
            <p id="characterLeft" class="help-block ">You have reached the limit</p>
        </span>                
    </div>
    <br style="clear:both">
    <div class="form-group col-md-2">
        <button class="form-control input-sm btn btn-success disabled" id="btnSubmit" 
        name="btnSubmit" type="submit" style="height:35px"> Send </button>    
    </div>
</form>


<h2>Regular</h2>
<select class="multiselect" multiple="multiple" name="buckHunter">
    <option value="1">Large Antelope &amp; Dangerous Game</option>
    <option value="2">Large Antelope (Blouwildebeest up until Eland)</option>
    <option value="3">Medium to Large Antelope (Blackwb up until Eland)</option>
    <option value="4">Small Game to Medium Game (up to Blackwildbeest)</option>
    <option value="5">N/A</option>
</select>

<h2>Fixed Width</h2>
<div class="mid-width">
   ...

CSS

.mid-width .multiselect-container {
    width: 200px;
}
.mid-width.wrapItems .multiselect-container>li>a { 
    white-space: normal;
}


textarea {
    resize: none;
}

JavaScript

var text_max = 200;
$('#count_message').html(text_max + ' remaining');

$('#text').keyup(function() {
  var text_length = $('#text').val().length;
  var text_remaining = text_max - text_length;
  
  $('#count_message').html(text_remaining + ' remaining');
});







$(document).ready(function(){ 
$('#characterLeft').text('150 characters left');
$('#message').keydown(function () {
var max = 150;
var len = $(this).val().length;
if (len >= max) {
    $('#characterLeft').text('You have reached the limit');
    $('#characterLeft').addClass('red');
    $('#btnSubmit').addClass('disabled');            
} 
else {
    var ch = max - len;
    $('#characterLeft').text(ch + ' characters left');
    $('#btnSubmit').removeClass('disabled');
    $('#characterLeft').removeClass('red');            
}
});    
});





$('.multiselect').multiselect({ 
    enableCaseInsensitiveFiltering: true,
    maxHeight: 200,
});