HTML、CSSの配置とレイアウトについて

inputとbuttonの間にある隙間を無くしたいのですが、方法が見つからないため投稿しました。
ご教授いただければ幸いです。

HTML
1コード  <body>
2  <header>
3  <h1 class="title">To Do List</h1>
4   <form>
5   	<div>
6   	<input class="input" type="text" placeholder="add your task here" >
7   	</div>
8   	<div>
9　　<button class="button" >click</button>
10	</div>
11   </form>
12  	
13  </header>
14</body>
15</html>

CSS
1コードbody {
2	width: 960px;
3	margin: 0 auto;
4	background-color: green;
5}
6.title{
7	text-align: center;
8	color: blue;
9	background-color: skyblue;
10}
11form{
12	display: flex;
13	justify-content: center;	
14}
15

m.ts10806

2020/10/28 13:02

コードブロック内はコードのみを入れてください。また中途半端な状態のコードだと再現確認になりません。コピペでそのまま再現できるコードをご提示ください。

ShinKoba

2020/10/28 13:48

かしこまりました。ご指摘ありがとうございます。

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

回答1件

ベストアンサー

  <header>
  <h1 class="title">To Do List</h1>
   <form>
       
       <input class="input" type="text" placeholder="add your task here" >
       
       
　　<button class="button" >click</button>
    
   </form>

  </header>
</body>
</html>

body {
    width: 960px;
    margin: 0 auto;
    background-color: green;
}
.title{
    text-align: center;
    color: blue;
    background-color: skyblue;
}
form{
    display: flex;
    justify-content: center;    
}

.input{
  margin-right:-30px;
}

投稿2020/10/28 13:09