Why my menu is merging with the input field ? I want it to be responsive-CodePudding

I am new to HTML CSS, can anyone tell me what am I doing wrong ? Why my menu is getting inside to input field ? adding this extra text because my question is not being posted Lol.adding this extra text because my question is not being posted Lol.adding this extra text because my question is not being posted Lol.adding this extra text because my question is not being posted Lol.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pink: #ff6161;
  --white: #fff;
  --black: #292828;
  --font: "Roboto", sans-serif;
}

header {
  min-height: 100px;
  max-width: 100%;
  background-color: var(--pink);
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  max-width: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-items {
  list-style-type: none;
  padding-right: 30px;
  font-family: var(--font);
  font-size: 20px;
}

.menu-items a {
  text-decoration: none;
  color: var(--black);
}

.search-bar {
  width: 700px;
}

.inp {
  width: 100%;
  height: 2rem;
}

<header>
  <div >
    <input  type="text" />
  </div>
  <ul >
    <i ></i>
    <li ><a href="#"> Home</a></li>
    <i ></i>
    <li ><a href="#">Store</a></li>
    <i ></i>
    <li ><a href="#">Support</a></li>
  </ul>
</header>

CodePudding user response：

It's because you're using align items: center and justify-content: center in your header at the same time.

You're basically forcing items inside header to move to the center.

CodePudding user response：

In your CSS, when you are modifying the header, you are putting all elements inside of it in the same position. Something you could to fix this is, give the header a relative position, and then manipulate each element inside the header individually.

CodePudding user response：

.menu { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}