Why is my input element wider than the other elements even though I already applied "box-sizing: border-box"?

I have an input element which has a padding of 1em on both the left and the right side. But I have applied "box-sizing: border-box" to it. However, It's width is still more than the other elements. I think it might be because I need to remove some piece of code but I'm not sure. The input element is definitely the one issue as the other element is properly center aligned. Below is the code:

:root {
  --main-color: #00308f;
  --secondary-color: #7cb9e8;
  --dark-color: #444;
  --light-color: #fafafa
}

body {
  font-family: Montserrat, sans-serif;
  background-color: var(--light-color);
  color: var(--dark-color);
  text-align: justify;
  margin-top: 70px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 1em
}



.my-contacts-div {
  align-items: center
}

.contacts-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center
}

.contact-card {
  width: 288px;
  margin: .5em;
  border-radius: .5em;
  box-shadow: var(--secondary-color) 1px 1px 10px;
  padding: 0 .75em;
  word-wrap: break-word
}

.contact-form {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  align-self: center;
  width: 350px;
  z-index: 1;
  background-color: var(--secondary-color);
  border-radius: 1em;
  padding: 1em;
  box-shadow: 1px 1px 1.5em var(--main-color);
  visibility: hidden
}

.contact-form:target {
  visibility: visible
}

.input-field {
  margin: .5em 0;
  border: solid 1px var(--secondary-color);
  border-radius: .5em;
  padding: 0 1em;
  height: 40px;
  box-sizing: border-box
}

.searchbar {
  margin: .5em;
  width: 100%
}

@media screen and (max-width:687px) {
  .my-contacts-div {
    padding: 0
  }

  .contact-card {
    width: 100%
  }
}

@media screen and (max-width:614px) {
  body {
    margin-top: 130px
  }
}

<div class="my-contacts-div">
  <h2>Heading</h2>
  <form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
  <div class="contacts-list">
    <div class="contact-card">
      <h3>Other component</h3>
    </div>
  </div>
</div>

What is wrong with it?

Solution

The issue was most likely that when you were using '.input-field' in the CSS, it was maybe not correctly using it so I just put 'form input.input-field' and also added some CSS to the form element. Now it is looking completely aligned.

:root {
  --main-color: #00308f;
  --secondary-color: #7cb9e8;
  --dark-color: #444;
  --light-color: #fafafa
}

body {
  font-family: Montserrat, sans-serif;
  background-color: var(--light-color);
  color: var(--dark-color);
  text-align: justify;
  margin-top: 70px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 1em
}



.my-contacts-div {
  align-items: center
}

.contacts-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center
}

.contact-card {
  width: 288px;
  margin: .5em;
  border-radius: .5em;
  box-shadow: var(--secondary-color) 1px 1px 10px;
  padding: 0 .75em;
  word-wrap: break-word
}

.contact-form {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  align-self: center;
  width: 350px;
  z-index: 1;
  background-color: var(--secondary-color);
  border-radius: 1em;
  padding: 1em;
  box-shadow: 1px 1px 1.5em var(--main-color);
  visibility: hidden
}

.contact-form:target {
  visibility: visible
}

form input.input-field {
  margin: .5em 0;
  border: solid 1px var(--secondary-color);
  border-radius: .5em;
  padding: 0 1em;
  height: 40px;
  box-sizing: border-box;
}

form {
  box-sizing: border-box;
  padding: 0 0.5em;
}

.searchbar {
  margin: .5em;
  width: 100%
}

@media screen and (max-width:687px) {
  .my-contacts-div {
    padding: 0
  }

  .contact-card {
    width: 100%
  }
}

@media screen and (max-width:614px) {
  body {
    margin-top: 130px
  }
}

<div class="my-contacts-div">
  <h2>Heading</h2>
  <form><input class="input-field searchbar" type="text" placeholder="Search here..."></form>
  <div class="contacts-list">
    <div class="contact-card">
      <h3>Other component</h3>
    </div>
  </div>
</div>