How can I center the elements in CSS?

Question

.header {
  display: flex;
  margin: 10px;
  background-color: #624693;
  height: 30px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.home {
  font-weight: bold;
  color: white;
  margin-right: 80px;
  vertical-align: ;
}

.search {
  flex: 1
}

<dev class="header">
  <p class="home">Home</p>
  <input class="search" placeholder="Search">
  <button class="download">Download</button>
</dev>

Why that "Home" item is at corner and how can I position it in the center?? OUTPUT

I'm just practicing HTML and CSS, I'm new to this. I simply want to put my doubts to rest and expect to find the solution.

Answer 1

Add to your .header Class align-items: center;