Why the margin-right is not worked?

[Dovb1ek]

This is all HTML Code:

<div class="container">
      <h1>Job Application Form</h1>
      <form action="">
        <label for="name" class="label">Full Name:</label>
        <input
          id="name"
          type="text"
          name="name"
          placeholder="Enter your name"
          required
        />
        <label for="email" class="label">Email:</label>
        <input
          id="email"
          type="email"
          name="email"
          placeholder="Enter your email"
          required
        />
        <label for="position" class="label">Position:</label>
        <select id="position" name="position" required>
          <option value="">Select a position</option>
          <option value="developer">Developer</option>
          <option value="designer">Designer</option>
          <option value="manager">Manager</option>
        </select>
        <fieldset class="radio-group">
          <legend>Availability:</legend>
          <input id="selection1" type="radio" name="availability" checked />
          <label for="selection1">Full-Time</label>
          <input id="selection2" type="radio" name="availability" />
          <label for="selection2">Part-Time</label>
        </fieldset>
        <label for="message" class="label">Why do you want this job?</label>
        <textarea
          id="message"
          name="message"
          placeholder="Write your motivation"
          required
        ></textarea>
        <button type="submit">Submit Application</button>
      </form>
    </div>

This is all CSS Code:

#message {
  min-height: 100px;
  margin-bottom: 10px;
}


.container {
  max-width: 80%;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgb(202, 202, 202);
  margin: 0 auto;
  padding: 20px;
}

.label {
  font-weight: bold;
}

.radio-group {
  padding-bottom: 20px;
}

input:focus,
textarea:focus {
  border: 1px solid yellow;
}

input:invalid,
select:invalid,
textarea:invalid {
  border: 1px solid red;
}

input:valid,
select:valid,
textarea:valid {
  border: 1px solid green;
}


.radio-group input[type="radio"] {
  margin-right: 5px;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition:border 0.3s ease ;
}

.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 3.5px white;
}

input[type="radio"]:checked + label {
  color: green;
  cursor: pointer;
}


button:hover {
  cursor: pointer;
  background-color: black;
}

button {
  border: hidden;
  border-radius: 2px;
  width: 100%;
  color: white;
  background-color: green;
  padding: 10px;
}

body {
  font-family: Arial, sans-serif;
  padding-top: 20px;
}

h1 {
  text-align: center;
}

:where(#name, #position, #email, #message) {
  border-radius: 2px;
  padding: 10px;
  width: 100%;
  margin: 5px 0px 10px 0px;
  box-sizing: border-box;
}

And I don’t know why the margin-right for the input is not worked as expected, I will show it below:

Origin:

Modified:(The value is exaggerated)

But Margins for other sides of inputs are all worked.Is their any chance that it is beacuse of the input width which is 100% or something else like the display forms?I am really confused about it!Pre-thanks for trying to answer me!!!

[lasjorg]

Are you trying to control the width of the input using the margin?

The left margin can move the element, it will make the element overflow the container on the right. But right margin, will just overflow the container (i.e. it will not make the element overflow to the left). Neither of the margins will make the input shrink in width. Besides, you already have width or max-width to do that.

[Dovb1ek]

First,Thanks for your reply!
I am not trying control the width of the input element through margins.
I am just curious why the margin-left can make the input overflow the container but margin-right cannot do the same like margin-left,which makes the input overflow the container to the left.

setting margin-left(pushing right)

setting margin-right(nothing happened)

[lasjorg]

Not sure if I can give a great technical explanation of it. You would have to go spec diving. There is logic to it, but the various layout algorithms are not always that easy to understand.

It is also related to the writing direction. If you set it to right-to-left, the right margin will make the element overflow to the left and the left margin will just overflow the container. Technically, I believe the margin is just ignored.

10.3.3 Block-level, non-replaced elements in normal flow

If all of the above have a computed value other than ‘auto’, the values are said to be “over-constrained” and one of the used values will have to be different from its computed value. If the ‘direction’ property of the containing block has the value ‘ltr’, the specified value of ‘margin-right’ is ignored and the value is calculated so as to make the equality true. If the value of ‘direction’ is ‘rtl’, this happens to ‘margin-left’ instead.