How do I keep all elements inside a box in the middle of the box?

How do I keep the input box in the middle of the green box?

Github-Link for the page: https://tahsinttalha.github.io/fcc-survey-form/

I have tried magin property to center the inout boxes. But in small screen, It's not working properly. What can I do?

Try adding box-sizing: border-box; to the CSS-definition of your input:

#input-info-section > input,
#dropdown,
textarea {
    width: 100%;
    height: 40px;
    margin: 10px auto;
    border: 2px solid #333333;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    color: #333;
    font-family: "Inter", sans-serif;
    /* add the following line: */
    box-sizing: border-box;
}

This way, the paddings and borders are calculated with all other measurements and not added after centering the element.

you can use flex to keep elements in the middle of box.like:

<div class="box">
  <input />
</div>

add CSS to the div

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

I suggest to use padding inside the main container, so all the div and block elements will take 100% of the width.

Just need to put width: 100% to all inputs.

I made a basic example :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

body {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 500px;
  background: lime;
  border-radius: 10px;
  border: 2px solid black;
  padding: 1rem;
}

.title {
  text-align: center;
  margin-bottom: 1rem;
}

.description {
  margin-bottom: 2rem;
}

.form-input, select-input {
  width: 100%;
  outline: none;
  border: 2px solid black;
  border-radius: 5px;
  height: 40px;
  margin: 1rem 0 ;
  padding: 1rem;
}

.select-input {
  width: 100%;
  height: 40px;
  border: 2px solid black;
  border-radius: 10px;
  margin: 1rem 0;
}

<!-- language: lang-html -->

<div class="container">
    <h1 class="title">
      Personal Survey
    </h1>
    <p class="description">
      This survey is being conducted solely for the purpose of the developement of the website. Your data is safe and secured and we will be disposed of the data after our   analysis is completed. Thank your very much for your time and effort.
    </p>
  <form action="#">
    <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your name">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your email">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your age">
    <div class="select-container">
      <select class="select-input" name="" id="dropdown">        
        <option value="Select">Select your profession type</option>
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
        <option value="">option 4</option>
      </select>
    </div>
  </form>
</div>

<!-- end snippet -->

I hope it will helps you