<nav class="navbar navbar-dark col-md-8 col-sm-9" id="top-nav-bar">
  <ul id="nav-bar" class="navbar-nav d-flex flex-column flex-sm-row navbar-right w-100 justify-content-end" data-hook>
    <li id="search-bar" data-hook>
      <%= render partial: 'spree/shared/search' %>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-dark col-md-8 col-sm-9" id="top-nav-bar">
  <ul id="nav-bar" class="navbar-nav d-flex flex-column flex-sm-row navbar-right w-100 justify-content-end mr-0 mr-md-3" data-hook>
    <li id="search-bar" data-hook>
      <%= render partial: 'spree/shared/search' %>
    </li>
  </ul>
</nav>

Fix top nav bar margin right to align with main grid
Fix top nav bar margin right to align with main grid
