content getting of <div> when reducing screen size

Question

Image of problem

I have 1 main div and inside it one more div. When I try to reduce the size of screen the main div shrinks from the right side but the input section inside the secondary div gets out of the main div.

.footer-main {
  margin-top: 100px;
  width: 100%;
  background-color: #faf7f5;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.45);
}

.left {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  padding-top: 50px;
  margin-left: 8.3%;
  margin-right: 8.3%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  float: none;
  margin-right: 6.25%;
  /* margin: 0; */
}

.btn1 {
  color: #fff;
  background-color: #ec2626;
  height: 61px;
  width: 510px;
  border: 0px;
  border-radius: 15px;
  margin-top: 30px;
}

<div class="footer-main">
  <div class="left">
    <div class="top">Contact Us</div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Name" name="name" id="name" required />
      <label for="name" class="form__label">Name</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="E-mail" name="E-mail" id="E-mail" required />
      <label for="E-mail" class="form__label">E-mail</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Message" name="Message" id="Message" required />
      <label for="Message" class="form__label">Message</label>
    </div>

    <button class="btn1" type="button">Submit</button>
  </div>
</div>

I dont know why the div is shrinking from the right. I am trying to make this section responsive, but the section does not change accourding to the screen size.

Answer 1

You need to set the width of your inputs in % units, not px. Pixels will always remain the same size no matter the width of your browser view.

.footer-main {
  margin-top: 100px;
  width: 100%;
  background-color: #faf7f5;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.45);
}

.left {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  padding-top: 50px;
  margin-left: 8.3%;
  margin-right: 8.3%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  float: none;
  margin-right: 6.25%;
  /* margin: 0; */
}

.btn1 {
  color: #fff;
  background-color: #ec2626;
  height: 61px;
  /* Width set as 100% */
  width: 100%;
  border: 0px;
  border-radius: 15px;
  margin-top: 30px;
}

<div class="footer-main">
  <div class="left">
    <div class="top">Contact Us</div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Name" name="name" id="name" required />
      <label for="name" class="form__label">Name</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="E-mail" name="E-mail" id="E-mail" required />
      <label for="E-mail" class="form__label">E-mail</label>
    </div>

    <div class="form__group field">
      <input type="input" class="form__field" placeholder="Message" name="Message" id="Message" required />
      <label for="Message" class="form__label">Message</label>
    </div>

    <button class="btn1" type="button">Submit</button>
  </div>
</div>

Another workaround is to use CSS Media Queries to set sizing at specific screen sizes.