width: 1000px;の中で画像を3枚横並びにしたいが反応してくれない

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>プログラミング学習</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
    <header>
    	<div class="header-main">
    	<h2>30DAYS トライアル</h2>
    	<ul>
    		<div class="header-text">
    		<li>テイトラとは</li>
    		<li>コース一覧</li>
    		<li>お問い合わせ</li>
    		</div>
    	</ul>
    	</div>
    </header>

    <div class="main-img">
    <img src="/Users/haruki/デイトラ/img/main-img.png" width="100%">

    <div class="main-text">
    <h1>1日1題30日で<br>プロのwebエンジニアになろう！</h1>
    <p>毎日設定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身につきます</p>
    </div>
    </div>

    
    <div class="deitora">
    <h1>デイトラとは</h1>
    </div>
    
    <div class=top>
       <img src="/Users/haruki/デイトラ/img/about.png" width="50%">
        <p>デイトラとは、無料で、迷わず、楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身につきます。<br>1日1題30日でプロのwebエンジニアを目指しましょう！</p>   
    </div>

    
    <h1 class="coures">コース一覧</h1>
    
    <ul class="list-img">
        <li><img src="/Users/haruki/デイトラ/img/blue.png"></li>
        <li><img src="/Users/haruki/デイトラ/img/green.png"></li>
        <li><img src="/Users/haruki/デイトラ/img/pink.png"></li>
    </ul>




    　　　

	
</body>
</html>

header {
	margin: 0 auto;
	width: 1000px;
}

header h2 {
	float: left;
}

.header-text li{
	padding-right: 30px;
	padding-top: 10px;
	float: right;
	list-style: none;
}

.main-img {
	position: relative;
}

.main-text {
	position: absolute;
    width: 100%;
    left: 0; 
    top: calc(50% - 25px); 
    text-align: center;
	}
.main-text h1 {
	padding-bottom: 25px;
}

.deitora {
	padding-top: 50px;
	text-align: center;
	padding-bottom: 30px;
}

.top {
	margin: 0 auto;
	width:  1000px;
	display: flex;	
}

.top img {
	padding-right: 10px;
}

.top p {
	padding-left: 10px;
}

.coures {
	text-align: center;
}

.list-img {
    display: flex;
}


.list-img li img {
	max-width:100%;
	height: auto;
}

list-imgにwidth: 1000px;と書いてもうまく反応しません。
1000px;内で画像を3枚横並びにするにはどうしたらいいですか？

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうですか。

css
1.list-img {
2  margin: 0 auto;
3  width: 1000px;
4  display: flex;
5  justify-content: space-between;
6  list-style: none;
7}
8.list-img > li {
9  width: 32%;
10}
11
12.list-img > li > img {
13  width:100%;
14}