Just beginning to explore the world of bootstrap and I'm facing an issue with adjusting the width of a search box. It is currently too close to the picture above and my navigation bar below in the container, making it look unattractive. Using   has created an unsightly large gap. Below you will find the snippets of CSS & HTML that I am working with. Any guidance on how to resolve this would be greatly appreciated.
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle
}
.form-inline .form-control-plaintext {
display: inline-block
}
.form-inline .input-group {
width: auto
}
.form-inline .form-check {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
padding-left: 0
}
.form-inline .form-check-input {
position: relative;
margin-top: 0;
margin-right: .25rem;
margin-left: 0
}
.form-inline .custom-control {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.form-inline .custom-control-label {
margin-bottom: 0
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Search -->
<form class="form-inline ">
<input class="form-control mr-sm-2 " type="search" placeholder="I'M LOOKING FOR..." aria-label="Search">
<button class="btn btn-pnpsample my-2 my-sm-0 " type="submit">Search</button>
</form>
<!-- End search -->