如何制作响应式填充？

Question

我有一个标题，我将其左右填充设置为 22.5%。左侧由徽标组成，右侧由搜索组成。我希望他们根据页面大小获得位置。如果我有小屏幕，那么填充应该减少，如果我有一个大屏幕填充必须增加。怎么做？

http://forum.wpbeaverbuilder.com/support/

当分辨率降低时，您会在这些网站中看到徽标和导航（主页、论坛主页..）靠近角落。我想这样做。

代码如下：

<header>
    <div id="headLeft">
        <a href="/"><img src="/img/logo.png" alt="Logo" height="65"></a>
    </div>
    <div id="headRight">
        <input id="search" placeholder="Aramak istediğin kelime..">
    </div>
</header>
header {
    height: 65px;
    background-color: #373737;
    padding: 0 22.5% 0 22.5%;
}
#headLeft { float: left; }
#headRight {
    float: right; 
    border-left: 2px solid #FFF;
    margin-top: 15.5px;
}
#search {
    border: none;
    background: transparent;
    margin-left: 7.5px;
    width: 200px;
    position: relative;
    bottom: 5.5px;
    font-family: serif;
    color: #FFF;
    font-size: 17px;
}

Answer 1

这与填充无关。您可以为内容容器设置百分比宽度和min-width: 1200px（或任何值）并使用margin: 0 auto; 将其居中。 （根本没有填充）