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

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?

CodePudding user response：

Add display: flex in the tag. It will solve the overflowing issue.

display: flex fills the entire container taking margin and padding into consideration. That's why it didn't overflow.

display: block is at 100% width by default and then adds margin and padding after causing the overflow.

CodePudding user response：

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>