margin: 0 auto;を使うと要素と要素の間に余白ができる

Question

実現したいこと

このようにしたいです
###起きている問題

わかりやすいように背景に色をつけています。
これでみてもらったらわかるように、要素と要素の間（真ん中）に必要以上にスペースがあります。

上記の画像のようにスペースを狭くしたいのですがmargin:0 auto;を指定するとどうしてもこれだけスペースが空いてしまいます。これは何故こんなにも真ん中にスペースが空くのでしょうか？
無理矢理、画像のような形にすることは簡単ですが、なぜこうなるのかという理由が知りたいです。

もう一つ、この画像をみていただければわかると思うのですが、右側の要素と左側の要素のサイズが同じため、右側の要素が必要以上に大きくボーダーはみ出ています。これは要素のサイズが一緒になるのでしょうか？

コード

html

        <div class="contents">
            <ul class="content">
                <h2>渡航前の事前学習</h2>
                <li>０から始めるプログラミング事前学習講座</li>
                <li>参加者グループコミュニティ</li>
                <li>チャットサポート</li>
                <li>事前スカイプコンサル</li>
                <li>環境構築の事前学習</li>
                <li>jQueryの事前学習講座</li>
                <li>Bootstrapの事前講座</li>
                <li>PHP / Mysqlの事前学習講座</li>
                <li>稼ぐためのHTML/CSS講座</li>
                <li>WordPressの事前学習講座</li>
            </ul>
            <ul class="content">
                <h2>バンコク渡航中</h2>
                <li>フリーランス独立術講座</li>
                <li>実際の実務案件をこなす</li>
                <li>ノマドフリーランス体験</li>
                <li>バンコク生活体験</li>
                <li>クラウドソーシング活用講座</li>
                <li>フリーランスのための営業講座</li>
            </ul>
        </div>

css

    .contents {
        text-align: center;
        display: flex;
        width: 1000px;
        margin: 0 auto;
        margin-top: 30px;
        background-color: $red-2;
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 380px;
            border: 3px solid $blue;       
            margin: 0 auto;
            h2 {
                font-size: 20px;
                background-color: $blue;
                color: $white;
                padding: 15px 0;
            }
            li {
                font-size: 16px;
                background-color: $white;
                color: $black;
                border-bottom:1px dotted $gray-light;
                padding: 15px 0;
            }
        }
    }

Answer 1

こんにちは。

上記の画像のようにスペースを狭くしたいのですがmargin:0 auto;を指定するとどうしてもこれだけスペースが空いてしまいます。これは何故こんなにも真ん中にスペースが空くのでしょうか？

大雑把に言うと、フレックスアイテム（display:flexがある要素の子要素）のマージンがautoとなっている場合、余剰の幅をマージンが均等に埋めます。

ご提示のコードですと、.contents の幅が1000px、.content の幅が380pxですから、1000-380-380=240px の余剰があります。
.content が2つあり、それぞれ左右にautoのマージンがあるので、4分割され 240/4=60pxのマージンが付きます。
（簡単のため省略していますが、実際にはボーダーの分だけずれます）

参考：
主軸上での位置合わせに auto マージンを使う | フレックスコンテナー内のアイテムの配置 - CSS: カスケーディングスタイルシート | MDN

---

右側の要素と左側の要素のサイズが同じため、右側の要素が必要以上に大きくボーダーはみ出ています。これは要素のサイズが一緒になるのでしょうか？

はい、そうです。
大雑把に言うと、align-itemsプロパティを未設定の時、フレックスアイテムの高さはフレックスコンテナ（display:flexがある要素）の高さいっぱいまで広がります。

stretch
アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。
align-items - CSS: カスケーディングスタイルシート | MDN

Comments

[M_Ren]

コメント、回答大変ありがとうございます。
display: flex;の子要素にmargin: 0 auto; を指定したら均等に余白ができるのは知りませんでした。
ありがとうございます。

>右側の要素と左側の要素のサイズが同じため、右側の要素が必要以上に大きくボーダーはみ出ています。これは要素のサイズが一緒になるのでしょうか？

こちらの質問の方なのですが、align-itemsを指定していないと、要素が高さいっぱいまで広がるということは分かったので、align-items: stretch;を.contensに指定したのですが特に変化がありませんでした。
代わりに、align-items: start;を指定したところうまく行ってくれたのですが、これは何故、align-items: stretch;が効かなかったのでしょうか？

[Lhankor_Mhy]

少しだけ詳しく書くと、
・align-items の初期値（未指定の時の値）は、normalです。
・align-items: normal の時、フレックスレイアウトでは stretch と等価です。

ですので、align-items: stretch を指定する、というのは何も指定しないことと同じです。

なお、以上のことは、回答にも書いた↓こちらのページに詳しく書いてあります。
https://developer.mozilla.org/ja/docs/Web/CSS/align-items

[M_Ren]

そういうことでしたか、
とても納得しました。
参考ページ等まで添付していただき本当にありがとうございました。