センター2つの<section>タグが隣り合っています

Question

こんにちは、私はHTMLとCSSでとても新しいです。私は2つのタグを互いに隣合うように配置して、ページの真ん中に完全にその中のすべてのテキストとコンテンツがあるようにしたいと思います。私はほとんど仕事にそれを持っているが、セクションボックスが、私はどのように私はあなたがここにCSSです:)

役立つことを願って、今それを修正する見当がつかない...ビットは左TEになっている：

section{ 
text-align: center; 
background-color: #ffffff; 
border-style: dotted; 
float: left; 
width: 45%; 
height: auto; 
padding: 10px; 
margin: 5px; 
} 

サイトは、次のようになります。 Site

Answer 1

これを行うための近代的で簡単な方法はフレキシボックスを使用することです。あなたも宇宙の間に/スペースの周りを使用することができる代わりに、中央の

#container { 
    display: flex; 
    justify-content: center; 
} 

<div id="container"> 
    <section>Content</section> 
    <section>Content</section> 
</div> 

：次のプロパティ - あなたは、コンテナのdiv（メイン、記事などまたはDIVのいずれかの意味的なバージョン）を与えることによってこれを行うことができますあなたがしたいことに応じて。

https://jsfiddle.net/3qk981mk/1/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

フレキシボックス技術を学ぶための楽しいゲーム： http://flexboxfroggy.com/

---

をあなたはそれを古い学校の方法を実行したい場合は、上の次のCSSを使用します容器：

margin: 0 auto; 

これは垂直方向に0マージンを与え、コンテンツを水平方向に集中させます。

しかし、フレックスボックスと一緒に行くと、それはひどいです！