Html 如何制作响应性衬垫？

我有一个标题，我把它的左右边距设置为22.5%。左侧由徽标组成，右侧由搜索组成。我希望他们得到的位置根据页面大小。若我有一个小屏幕，那个么填充应该减少，若我有一个大屏幕，填充必须增加。怎么做

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

代码如下：

<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;
}

标题{
高度：65px；
背景色：#3737；
填充：022.5%022.5%；
}
#headLeft{float:left；}
#头灯{
浮动：对；
左边框：2倍实心#FFF；
利润上限：15.5px；
}
#搜寻{
边界：无；
背景：透明；
左边距：7.5px；
宽度：200px；
位置：相对位置；
底部：5.5px；
字体系列：衬线；
颜色：#FFF；
字号：17px；
}

这与填充无关。您可以为内容容器设置百分比宽度和

最小宽度：1200px

（或任何值），并使用

边距：0自动将其居中。（完全没有填充）