絶対配置され、中央揃えのdivの余白をウィンドウのサイズに合わせて保持する

Question

私のページには、コンテナとして機能するdivがほとんどありません。

header { 
    background-color: #fff; 
    height: 153px; 
    width: 97%; 
    min-width: 1084.06px; 
    margin: 15px auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
    border-radius: 20px; 
} 

これは、私のヘッダーの中央に配置されたコンテナです。他のいくつかのコンテナがあります（絶対的な、中央の、幅の％）。

問題は、ウィンドウのサイズを変更すると、これらのすべてのコンテナがブラウザウィンドウの左側に表示されるという問題です。私は特定のウィンドウの幅にいくつかの余裕を保存したい。それをどうすれば実現できますか？

P.S.私はmargin-leftを追加した場合、それはdiv要素

Answer 1

その後、別のマージン右 を追加あなたはメディアクエリを使用することができます

Answer 2

を使用するものに応じてそれをまっすぐの私の中心位置を壊し、メディアクエリをのみ、特定の条件に適用されています特定の幅のようなものである。

たとえば、次の背景色ルールが広い480PXよりスクリーン用には適用されません。

@media screen and (max-width: 480px) { 
    body { 
    background-color: lightgreen; 
    } 
} 

メディアクエリに関する詳細情報については、this w3schools page