は自動的にコンテナの幅を縮小し、ブローワーウィンドウのサイズを変更します

Question

私はCSSとHTMLを使用してこのウェブサイトのホームページを再現しようとしていますhttp://www.newsweek.com/練習として。

大きな画面でページを開くと、幅が狭くなるにつれて2つの空の列が徐々に減少します。

私はこの現象を再現したいが、最後までそれをすることはできません。

@media screen and (max-width: 1047px) { 
    .container { 
    width:100%;}} 

：私は初期の幅でいくつかの点でCSSメディアクエリのおかげで100％となって80％をコンテナクラスを設定しています

私が忘れるのは、この容器を徐々に減らすことです。どのようにそれを作ることができますか？

はそのような経験のために非常に多くの

Answer 1

をありがとう、あなたが必要なのは、このようなものです：.containerは（<div>のような）ブロックレベル要素に適用される場合

.container { 
    max-width: 1200px; 
    margin-right: auto; 
    margin-left: auto; 
} 

この要素、自然できるだけ広いものになる。これは、ちょうど1200pxよりも広くはないと言って、左と右のスペースを均等に指定します。

何らかの理由で要素がブロックレベルでない場合（例：<span>）、ブロックレベルにするために上記のコードにdisplay: block;を追加するだけです。