Select2 input out of container

I'm using the CSS 3.5.4 with ASP.NET MVC , and it does not mesh with input , and it looks out.

HTML Code:

<div class="input-group" style="width:100%">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
        <input id="buscarReceptor" class="form-control input-sm" />
    </div>
    <label id="LabelsComprobante">Escriba el nombre del cliente, automaticamente se mostraran las opciones disponibles.</label>
</div>

When CSS did not move anything:

@RenderSection("Styles", false)
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Data table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" />

<!-- Select2 -->
<link rel="stylesheet" href="~/Content/Select2-3/select2.css"  />

<link href="~/Content/Master.css" rel="stylesheet" />

And the Script:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<!-- jQuery -->
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<!-- Customizadores -->
<script src="~/Scripts/AjustesPages.js"></script>

<!-- Data Table -->
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<!-- Select2 -->
<script src="~/Content/Select2-3/select2.js" type="text/javascript"></script>