Here is my current search bar:
And here is my expectation:
I still don't understand about how to make centered search bar like that ?
here is my html (from inspect element):
<header class="page-header"><div class="panel wrapper"><div class="panel header"><a class="action skip contentarea" href="#contentarea"><span>Skip to Content</span></a>
<ul class="header links"> <li class="greet welcome" data-bind="scope: 'customer'">
<!-- ko if: customer().fullname --><!-- /ko -->
<!-- ko ifnot: customer().fullname -->
<span class="not-logged-in" data-bind="html:"Default welcome msg!"">Default welcome msg!</span>
<!-- /ko -->
</li>
<li class="authorization-link" data-label="or">
<a href="http://senheng.local/customer/account/login/referer/aHR0cDovL3NlbmhlbmcubG9jYWwv/">
Sign In </a>
</li>
<li><a href="http://senheng.local/customer/account/create/">Create an Account</a></li></ul></div></div><div class="header content"><span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
<a class="logo" href="http://senheng.local/" title="">
<img src="http://senheng.local/static/version1557390609/frontend/Senheng/default/id_ID/images/senheng.png" title="" alt="" width="300" height="300">
</a>
<div class="block block-search">
<div class="block block-title"><strong>Search</strong></div>
<div class="block block-content">
<form class="form minisearch" id="search_mini_form" action="http://senheng.local/catalogsearch/result/" method="get">
<div class="field search">
<label class="label" for="search" data-role="minisearch-label">
<span>Search</span>
</label>
<div class="control">
<input id="search" type="text" name="q" value="" placeholder="Search entire store here..." class="input-text" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<div class="nested">
<a class="action advanced" href="http://senheng.local/catalogsearch/advanced/" data-action="advanced-search">
Advanced Search </a>
</div>
</div>
</div>
<div class="actions">
<button type="submit" title="Search" class="action search" disabled="">
<span>Search</span>
</button>
</div>
</form>
</div>
</div>
<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
<a class="action compare no-display" title="Compare Products" data-bind="attr: {'href': compareProducts().listUrl}, css: {'no-display': !compareProducts().count}">
Compare Products <span class="counter qty" data-bind="text: compareProducts().countCaption"></span>
</a>
</li>
</ul></div></header>
any help would be really appreciated.
block-search
css class