Bootstrap Alert in Jumbotron wrong margins - html

Question

I am creating a part of my website which includes a Jumbotron and a collapsable alert message, both from the Bootstrap Framework. I am having problems with the margins from the alert box. I use the standard CSS for the Jumbotron with adjusted paddings, which do not interfere with my problem though.
This is how it looks like unmodified:
I want the alert box to fit with the alignment of the selection boxes. I tried override the properties of the alert class with this:
.alert-custom-style {
margin-left: 15px;
margin-right: 15px;
width: 100%;
}
The result of it is here:
This does work fine for the left side, but the margin-right property somehow does not get considered. I tested this by putting margin-left back to 0px but then it just looked like in the first picture. I am really scratching my head around why the left margin property works, but not the right one. Any suggestions or help is very appreciated.
Here is the HTML-Code:
<div class="jumbotron jumbotron-custom">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
<!-- Dropdown List for the first country -->
<select id="country1" name="Country Selection 1" class="selectpicker" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose..."></select>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 top-buffer">
<!-- Compare Button -->
<button id="btnSubmit" type="Submit" class="btn btn-success btn-block">Compare</button>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
<!-- Dropdown List for the second country -->
<select id="country2" name="Country Selection 2" class="selectpicker" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose..."></select>
</div>
<!-- JavaScript file to handle the data management -->
<script src="js/compare.js"></script>
<!-- JavaScript file to handle the selection lists -->
<script src="js/lists.js"></script>
</div>
<div class="row top-buffer">
<div id="alert" class="collapse alert alert-custom-style col-lg-12 col-md-12 col-sm-12 col-xs-12" role="alert"> <!-- Collapsed by default -->
<strong>Warning: </strong><span id="alert-span">Please select at least two different countries</span>
</div>
</div>
</div>

Answer 1

For row that holds the alert with the class top-buffer try adding:
margin-left: 15px;
margin-right: 15px;
I don't have all your css, but here is a rough version that I think approximates what you want.
Use the "full page" button at the bottom of the snippet to see the result in a wider view.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="jumbotron">
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
<!-- Dropdown List for the first country -->
<select id="country1" name="Country Selection 1" class="selectpicker" style="width:100%;" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose...">
</select>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 top-buffer">
<!-- Compare Button -->
<button id="btnSubmit" type="Submit" class="btn btn-success btn-block" style="width:100%;">
Compare
</button>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
<!-- Dropdown List for the second country -->
<select id="country2" name="Country Selection 2" class="selectpicker" style="width:100%;" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose...">
</select>
</div>
<div class="row top-buffer" style="margin-left: 15px; margin-right: 15px;">
<div id="alert" class="collapse in alert alert-custom-style col-lg-12 col-md-12 col-sm-12 col-xs-12" role="alert" style="background-color: red;"> <!-- Collapsed by default -->
<strong>Warning: </strong><span id="alert-span">Please select at least two different countries</span>
</div>
</div>
</div>
</div>