Changing width of ion-searchbar container div

Ionic Framework ionic-v3
1

How do you change the width of ion-searchbar 's container div?

As seen in the images below, an ion-searchbar has a container div with the class toolbar-content.

19%20PM

05%20PM
Screen Shot 2018-02-13 at 8.26.05 PM.png814×208 14.1 KB

I would like to make this container div smaller so that I can center the two buttons on either side of the searchbar in the remaining whitespace.

So far, I have altered the width of the actual searchbar itself successfully, by giving the searchbar an id of “home-search” with this corresponding CSS:

#home-search {
    width: 90%;
    margin: auto;
}

This makes the actual ion-searchbar smaller, however, the searchbar’s container still remains the same width.

I would like to figure out how to change the width of the actual container div, so that I can then center the two buttons on either side of the search bar in the remaining whitespace.

Here is the HTML used for reference.

<ion-header>
    <ion-navbar mode="ios">
        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="settings"></ion-icon>
            </button>
        </ion-buttons>
        <ion-searchbar id="home-search" placeholder="Search Groups & Connections" (ionInput)="filterItems($event, this.content)"
            (ionClear)="resetFilter($event)"></ion-searchbar>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

Thank you very much for your time and any suggestions or pointers in the right direction would be greatly appreciated!

EDIT: For clarification, I have tried manipulating the CSS of the toolbar-content and toolbar-content-ios classes but have not had any success. I tried changing the width, padding, margins, etc, but I have not been able to successfully modify the width of the container class. Thank you!

2

Solved it by adding this CSS to the ion-buttons:

margin: auto;
flex-basis: 50px;

Turns out the search bar will then fill the remaining space and the buttons on either side will be centered like I wanted.