Error with positioning an HTML/CSS/BOOTSTRAP search bar

Question

I’m having a problem positioning the search bar, I want to cover it to the right but I’m not getting it, I’ve taken the padding and the margin and it’s still the same. (Colors are to demonstrate what is failing)

<div class="row rowa bg-danger">
                        <div class="col-4 px-0 justify-content-left"> 
                           <h3 class="display-4 ml-0 pl-0">Candidates</h3>
                        </div>
                        <div class="col-6 bg-success"> <!--Search bar-->
                            <div class="searchbar text-center bg-primary">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search this blog">
                                    <div class="input-group-append">
                                        <button class="btn btn-secondary" type="button">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

His grid is kind of weird because he has to total 12, but you’re using 4 in the first col and 6 in the second, totaling 10... However, it is enough that in the col-6 with the search you put ml-auto, That will leave it right, and to take out the internal space, you put pr-0 to remove the padding right-wing col

Summing up your col with Searsh would look like this:

<div class="col-6 bg-success ml-auto pr-0"> <!--Search bar-->

Behold:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

    
<div class="container">
    <div class="row rowa bg-danger">
            <div class="col-4 px-0 justify-content-left"> 
               <h3 class="display-4 ml-0 pl-0">Candidates</h3>
            </div>
            <div class="col-6 bg-success ml-auto pr-0"> <!--Search bar-->
                <div class="searchbar text-center bg-primary">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search this blog">
                        <div class="input-group-append">
                            <button class="btn btn-secondary" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>