justify-content: space-between と　widthの関係性について

display:flex をした後　justify content: space between を行ったのですがcssが適用されないのでwidth:30%を入力したところcssが適用されました。　なぜwidthがないとjustify contentは適用されないのでしょうか？

該当箇所CSS
/course/
.course {
background: #e3fcf4;
}
.course-wrapper {
display: flex;
justify-content: space-between;
}

.course-item {
width: 30%;
}

該当箇所HTML

<section class="course section"> <div class="container"> <h2 class="section-title">コース一覧</h2> <div class="course-wrapper"> <div class="course-item"> <img src="./img/web_first.png" alt="初級コース"> <p>HTML / CSS / Bootstrap</p> </div> <div class="course-item"> <img src="./img/web_second.png" alt="中級コース"> <p>HTML / CSS / Javascript / jQuery</p> </div> <div class="course-item"> <img src="./img/web_third.png" alt="上級コース"> <p>PHP / WordPress</p> </div> </div> </div> ```HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初めてのLP</title> <meta name="description" content="デスクリプションです"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <h1 class="header-title">30DAYSトライアル</h1> </div> <div class="header-right"> <ul class="header-nav"> <li><a href="#">デイトラとは</a></li> <li><a href="#">コース一覧</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div>

    </div>
</header>

<section class="top">
    <img src="./img/main-vsual.png" alt="">
</section>
<section class="about section">
    <div class="container">
        <h2 class="section-title">デイトラとは</h2>
        <div class="about-left">
            <!--altには画像の説明を入れる-->
            <img src="./img/about.png" alt="デイトラとは">
        </div>
        <div class="about-right">
            <P>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。1日1題30日でプロのWebエンジニアを目指しましょう！</P>
        </div>
    </div>
</section>
<section class="course section">
    <div class="container">
        <h2 class="section-title">コース一覧</h2>
        <div class="course-wrapper">
            <div class="course-item">
            <img src="./img/web_first.png" alt="初級コース">
            <p>HTML / CSS / Bootstrap</p>
            </div>
            <div class="course-item">
            <img src="./img/web_second.png" alt="中級コース">
            <p>HTML / CSS / Javascript / jQuery</p>
            </div>
            <div class="course-item">
            <img src="./img/web_third.png" alt="上級コース">
            <p>PHP / WordPress</p>
            </div>
        </div>
    </div>
</section>
<section class="contact section">
    <div class="container">
        <h2 class="section-title">お問い合わせ</h2>
        <p class="contact-message">さあ今日から30日間始めよう！</p>
        <form action="# method="post">
           <input type="email" name="email" id="email" placeholder="メールアドレス">
           <button type="submit" class="btn btn-resister" >無料で始める</button>
        </form>
    </div>
</section>

<footer> <div class="container"> <p class="copy-right">Copyright(C) 2020 東京フリーランス ALL Rights Reserved</p> </div> </footer> </body> </html> ``` ```CSS body { color: #082B48; font-family: Verdana, Geneva, Tahoma, sans-serif; line-height: 1.5;

}
img {
width: 100%;
height: auto;
}
a {
text-decoration: none;
color: #082B48;
}
a:hover {
opacity: 0.7;
}
.container {
width: 90%;
max-width: 980px;
margin: auto;
}
ul {
list-style: none;
}
/ヘッダー/
header {
padding: 20px 0;
overflow: hidden;
}
.header-title {
font-weight: 600;
font-size: 32px;

}
.header-left {
float: left;
}
.header-right {
float: right;
}
.header-nav li {
float: left;
margin-left: 50px;
font-size: 18px;
}
.header-nav a {
font-weight: 600;
line-height: 48px;
}
.top {
height: 400px;
}
/section共通クラス/
.section {
padding: 60px 0;
}
.section-title {
font-size: 32px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
/about/
.about-left {
float: left;
width: 48%
}
.about-right {
float: right;
width: 48%;
}
.about {
overflow: hidden;
}
/course/
.course {
background: #e3fcf4;
}
.course-wrapper {
display: flex;
justify-content: space-between;
}

.course-item {
width: 30%;
}
.contact-message {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
}
input[type="email"] {
width: 600px;
border: 3px solid #d8d8d8;
font-size: 18px;
display: block;
margin: auto;
padding: 15px;
border-radius: 55px;
margin-bottom: 20px;
}
.btn {
width: 500px;
padding: 10px 60px;
display: inline-block;
background-color: #082b48;
color: #fff;
font-size: 24px;
font-weight: bold;
border-radius: 4px;
border: none;
}
.btn:hover {
opacity: 0.7;
cursor: pointer;
}
.btn-resister {
background-color: #ec6d64;
display: block;
margin: auto;

}
/フッター/
footer {
background-color: #082B48;
color: #fff;
padding: 20px 0;
overflow: hidden;
}
.copy-right {
font-size: 12px;
float: right;
}

デベロッパーツールでwidthを消した時の画像の動きを確認したところwidthがないとjustify-content:space-betweenのcssが適用されないためなぜなのかお聞きしたいです。
![![イメージ説明](88c6a11f33ec695970fe8679ba0b5424.png)]
![イメージ説明](9711da3d02c71818a7449096121b0ddc.png)