Why doesn't this form stick to “justify-content: center” set by its parent container?

问题

As I shrink the screen the contact form ditches the properties that I set in its parent container. Everything is fine up until a certain point then suddenly the form jumps to the left with lots of right margin. I can't get my head around why this is happening as the h2 and p tag is doing what it's supposed to do and the form is a child.

/* Section 6 */

.container6-heading {
	margin: 60px auto;
	max-width: 1170px;
	text-align: center;
	display: flex;
	justify-content: center;
	flex: 0 0 calc(50% - 30px);
}

/* Contact Form Homepage */

.form {
	width: 60vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 calc(100% - 20px);
}
.home-name {
	width: 100%;
	height: 38px;
	margin-bottom: 1em;
}

.home-phone {
	height: 38px;
	margin-bottom: 1em;
	width: 29.5vw;
}

.home-email {
	width: 29.5vw;
	height: 38px;
	margin-bottom: 1em;
}

.flex-container {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.home-message {
	width: 100%;
	height: 167px;
}

#input {
	background: #ffffff;
	border: 1px solid #eaeaea;
}

.form-button {
	margin: 20px auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-message-contact {
	margin-top: 20px;
}

input {
	text-indent: 10px;
}

textarea {
	text-indent: 10px;
}

<html>
<body>
<section class="container6-heading">
                    <div class="section6-heading">
                        <h2>Nunc varius nec orci eget dictum</h2>
                        <div class="section6-text">
                            <p>Mauris vel lorem a tortor eleifend blandit a porttitor ligula.<br> Sed nunc erat, interdum sed lorem ac, efficitur sagittis tortor<br> tortor.</p>
                    </div>
            
                    <div class="form">
                        <div class="name-form">
                          <input type="text" placeholder="Name" class="home-name" id="input" required>
                        </div>
                      <div class="flex-container">
                        <div class="phone-form">
                          <input type="text" placeholder="Phone" class="home-phone" id="input" required>
                        </div>
                      
                        <div class="email-form">
                          <input type="text" placeholder="Email" class="home-email" id="input" required>
                        </div>
                    </div>
                        <div class="message-form">
                          <textarea  type="text" placeholder="Message" class="home-message" id="input" required></textarea>
                        </div>
                        <div class="form-button">
                            <button class="home-message-contact" type="submit">Submit</button>
                        </div>
                        
                      
                      </div>
                    </div>
                </section>
</body>
</html>

回答1:

Having fixed-width might be creating the problem. Removing the width for form seems to help. See this code snippet below -

/* Section 6 */

.container6-heading {
	margin: 60px auto;
	max-width: 1170px;
	text-align: center;
	display: flex;
	justify-content: center;
	flex: 0 0 calc(50% - 30px);
}

/* Contact Form Homepage */

.form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 calc(100% - 20px);
}
.home-name {
	width: 100%;
	height: 38px;
	margin-bottom: 1em;
}

.home-phone {
	height: 38px;
	margin-bottom: 1em;
}

.home-email {
	height: 38px;
	margin-bottom: 1em;
}

.flex-container {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.home-message {
	width: 100%;
	height: 167px;
}

#input {
	background: #ffffff;
	border: 1px solid #eaeaea;
}

.form-button {
	margin: 20px auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-message-contact {
	margin-top: 20px;
}

input {
	text-indent: 10px;
}

textarea {
	text-indent: 10px;
}

<html>
<body>
<section class="container6-heading">
                    <div class="section6-heading">
                        <h2>Nunc varius nec orci eget dictum</h2>
                        <div class="section6-text">
                            <p>Mauris vel lorem a tortor eleifend blandit a porttitor ligula.<br> Sed nunc erat, interdum sed lorem ac, efficitur sagittis tortor<br> tortor.</p>
                    </div>
            
                    <div class="form">
                        <div class="name-form">
                          <input type="text" placeholder="Name" class="home-name" id="input" required>
                        </div>
                      <div class="flex-container">
                        <div class="phone-form">
                          <input type="text" placeholder="Phone" class="home-phone" id="input" required>
                        </div>
                      
                        <div class="email-form">
                          <input type="text" placeholder="Email" class="home-email" id="input" required>
                        </div>
                    </div>
                        <div class="message-form">
                          <textarea  type="text" placeholder="Message" class="home-message" id="input" required></textarea>
                        </div>
                        <div class="form-button">
                            <button class="home-message-contact" type="submit">Submit</button>
                        </div>
                        
                      
                      </div>
                    </div>
                </section>
</body>
</html>

来源：https://stackoverflow.com/questions/61940377/why-doesnt-this-form-stick-to-justify-content-center-set-by-its-parent-conta

标签

html

css

flexbox