不同屏幕分辨率的CSS对齐问题

Question

我有一个包含图片和搜索框的标题。标题区域和结果区域都是单独的divs。

搜索框位于标题区域中。在结果div的左侧有一些菜单项。我需要将搜索框与结果开始区域对齐。

在.tk-bl-header我添加了margin-left = 5em来工作。但是当我移动到不同的屏幕分辨率时，它会变得不对齐。

＆＃13;

＆＃13;

       .tk-bl-header .tk-header-search-area {

         display: inline-block;

         float: left;

         width: 43.75%;

         padding-left: 1.5625%;

         padding-right: 1.5625%;

         position: relative;

         color: black;

         margin-left: 5em;

       }

       .searchform-container .searchform {

         margin-bottom: 1em;

       }

       header .tk-bl-header h1 #logo a {

         text-decoration: none;

       }

       a.library-logo {

         background: url("../abc.jpg") no-repeat scroll left top transparent;

         width: 110px;

         height: 100px;

       }

       a.logo-name {

         margin-top: 10px;

         font-size: 20px;

       }

       div#second-header {

         display: inline-block;

         height: 65px;

         position: relative;

         width: 100%;

         /* overflow: hidden; */

       }

＆＃13;

<header class="tk-bl-header">

<div id="second-header">
  <h1 id="logo">
		<a href="http://example.com" target="_blank" class="library-logo"></a> 
        <a href="${pageContext.servletContext.contextPath}" class="logo-name">ABCD</a>
	</h1>

  <div class="tk-header-search-area">
    <div class="tk-header-search-form">
      <div class="searchform-container ">
        <form id="" class="searchform" action="" method="get" data-filters="">
          <fieldset>
            <legend>Search</legend>
            <input type="text" name="q" class="query" value='${query.value.display}' placeholder="Search documents.." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
            <input type="submit" class="submit" value="Search">
          </fieldset>
        </form>
      </div>
    </div>
  </div>


  <div id="col-right-top" class="sidebar col"></div>

</div>



</header>

＆＃13;

＆＃13;

＆＃13;