真ん中にうまく配置されない

<!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"><p>HTML/CSS/Bootstrap</p></li>
        <li><img src="/Users/haruki/デイトラ/img/green.png"><p>HTML/CSS/Javascript/JQuery</p></li>
        <li><img src="/Users/haruki/デイトラ/img/pink.png"><p>PHP/WordPress</p></li>
    </ul>

    <div class="inquiry">  
    <h1>問い合わせ</h1>
    <p>さあ今日から30日間を始めよう！</p>
　　    
    <form action="#">
        <input type="email" name="mail" placeholder="メールアドレス" class="input">

    </form>
    <input type="button" value="無料で始める" class="btn-free">
    　　
    </div>
</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 {
  margin: 0 auto;
  width: 1000px;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.list-img > li {
  width: 32%;
}

.list-img > li > img {
  width:100%;
}	

.inquiry {
	text-align: center;
	
}

.inquiry h1 {
    padding-bottom: 30px;
}

.input {
	width:  550px;
	height: 35px;
	border-radius: 15px;
	outline: none;
	border: 2px solid #CCCCCC;
}

.btn-free {
	width:  300px;
	height: 70px;
	margin-top: 30px;
	border-radius: 15px;
	outline: none;
	border: none;
    border-bottom: solid 4px #627295;
	background-color: #FF8856;
    color: white;
    font-size: 25px;
    font-weight: bold;
}

.btn-free:active {
  transform: translateY(4px);
  border-bottom: none;
}

最後の<input type="button" value="無料で始める" class="btn-free">の部分が少し左にずれて表示されます
クラス　"inquiry"でdisplay: flex;で真ん中に配置していますが、それが原因でしょうか。。。

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

回答2件

問題のinputタグの次の行に無駄なスペース（タブ）が入っているのでその行を消せば中央に表示されますよ。
そうした文字に左右されたくない場合は、inputをdisplay:block;にセットしてあげるといいでしょう。

投稿2020/09/25 12:39

geta

総合スコア241

自己解決

小要素に　displya: inline-block;をいれ親要素に　text-align: center;を入れたら解決しました。

投稿2020/09/25 12:38

rara0210

総合スコア18

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

真ん中にうまく配置されない

関連した質問