もともとのコードはこうでした。
![](https://webtan.tech/wp-content/uploads/2021/09/image-1024x142.png)
<header>
<div class="header_inner">
<h1><a href="./index.html"><img src="./images/logo.png" alt="有機野菜ドットコム"></a></h1>
<div class="header_info">
<p>営業時間:9:00〜18:00</p>
<p>電話番号:000-0000-0000</p>
</div>
</div>
</header>
header{
border-top: 4px solid #135b0f;
}
.header_inner{
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 30px 0;
}
.header_info{
font-size: 18px;
}
![](https://webtan.tech/wp-content/uploads/2022/02/hito3-150x150.jpg)
やっぱりヘッダーはシンプルにロゴだけにしてほしいです。
![](https://webtan.tech/wp-content/uploads/2021/10/men.png)
![](https://webtan.tech/wp-content/uploads/2021/10/men.png)
![](https://webtan.tech/wp-content/uploads/2021/10/men.png)
ということで、ヘッダーの真ん中にロゴのみが表示されるように修正してください
![](https://webtan.tech/wp-content/uploads/2021/09/cc5464a5f55888064360e2b14a743f75-1024x90.png)
![](https://webtan.tech/wp-content/uploads/2021/09/cc5464a5f55888064360e2b14a743f75-1024x90.png)
目次
修正のコード例
<header>
<div class="header_inner">
<h1><a href="./index.html"><img src="./images/logo.png" alt="有機野菜ドットコム"></a></h1>
</div>
</header>
header {
border-top: 4px solid #0d5c40;
}
.header_inner {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: center;
padding: 30px 0;
}
.header_info {
font-size: 18px;
}
![](https://webtan.tech/wp-content/uploads/2019/11/-指差しポーズ-e1578975942866.png)
![](https://webtan.tech/wp-content/uploads/2019/11/-指差しポーズ-e1578975942866.png)
![](https://webtan.tech/wp-content/uploads/2019/11/-指差しポーズ-e1578975942866.png)
なぜ justify-content: center; に変えたのか?Flexboxのチートシートを見ながら考えてみてくださいね。