CSS-导航栏样式

Question

很抱歉，如果这是一个非常简单的问题，我对前端设计还很陌生，并试图弄清楚如何正确显示导航栏。它所包含的只是一个图像和一个搜索栏，但是该图像不在页面上，因此似乎似乎无法调整填充和边距。搜索栏很好，只是徽标无法正确显示。

我希望徽标向左平移，并且搜索栏位于中心。

如何设计样式？

<div class="navbar-top">
  <div class="logo">
    <%= image_tag("logo_01.png", :size => "230x200") %>
  </div>
  <fieldset class="search">
    <%= form_tag products_path, method: :get, class: "product_search" do %>
      <div class="search-field">
        <%= text_field_tag :title, params[:search], placeholder: "Search all products..." %>
      </div>                        
    <% end %>
  </fieldset>           
</div>

和我的CSS

header.main {

  .navbar-top {
    height: 100px;
    overflow: hidden;
    background: #474747;
    margin-top:-10px;
    display: flex;

    .logo {
      float: left;
      padding-bottom: 100px;
    }

    .search {
      border: none;
      text-align: center;
      padding-top: 30px;

      input[type=text] {
        width: 500px;
        height: 25px;
        border-radius: 4px;
        text-align: center;
      }

      input[type=submit] {
        width: 500px;
        height: 25px;
      }
  }

  .search-field {
    display: inline-block;      
  }
}