margin auto isn't centering flex item [duplicate] - css

Question

This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 3 years ago.
I'm trying to center the text area in my contact section at a max-width of 1400px; at this width I change the textarea's width from 100% to 90%. The contact section lies at the bottom of the page in the footer. The text area is a flex-item and was being centered with align-items: center but when I change the width to 90% it scoots over to the left? I tried margin left/right: auto; What's going on?
https://jsfiddle.net/yat5ncmk/9/
p.s the media query is at the bottom of the CSS
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.b1,
.b2,
.b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .15s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid green;
position: relative;
top: -10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 60px solid limegreen;
position: relative;
top: 20px;
}
.arrow-top {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid #20a04b;
position: relative;
top: -100px;
left: 60px;
}
.top-middle {
position: relative;
top: -110px;
}
.bottom-middle .arrow-left {
top: -40px;
}
.bottom-middle .move {
top: -70px;
}
.bottom {
position: relative;
top: -48px;
}
.bottom .arrow-left {
top: -40px;
}
/*---------------FOOTER---------------*/
.contact-section-background {
background-color: #666;
height: 300px;
clip-path: polygon(0% 0%, 10% 30%, 90% 30%, 100% 0%, 100% 100%, 0% 100%);
margin-top: -100px;
}
.contact-section {
display: flex;
background-color: #595959;
margin-top: -225px;
position: relative;
padding-bottom: 18px;
z-index: 1;
}
.contact,
.location {
flex-basis: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.contact h1,
.location h1 {
margin: 0;
font-family: 'Cedarville Cursive';
color: white;
font-size: 7rem;
}
.hex {
-webkit-clip-path: polygon(25% 60%, 75% 60%, 100% 100%, 0% 100%);
background-color: #17a832;
transform: rotate(180deg);
width: 300px;
height: 150px;
margin: 0 auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #17a832;
width: 80px;
height: 80px;
position: absolute;
margin: 0 auto;
top: 60px;
right: 0;
left: 0;
bottom: 0;
z-index: 2;
}
.back-to-top {
color: #595959;
font-size: 2.5rem;
left: -45px;
position: relative;
transform: rotate(180deg);
top: 110px;
font-family: 'Josefin Sans';
}
.btp-arrow {
color: #595959;
font-size: 3rem;
position: absolute;
left: 50%;
margin-left: -24px;
bottom: 35px;
transition: all .2s ease;
}
.btp-arrow:hover {
color: #ddae1a;
cursor: pointer;
transform: scale(1.1);
}
.contact p {
font-family: 'Josefin Sans';
font-size: 2rem;
margin-top: 0;
margin-bottom: 10px;
color: white;
}
.textarea {
position: relative;
min-width: 500px;
}
.contact textarea {
resize: none;
width: 100%;
color: #595959;
margin: 10px;
min-height: 150px;
font-family: 'Josefin Sans';
font-size: 1.5rem;
padding: 5px;
outline: none;
border: none;
background: #474646;
border-radius: 4px;
}
.contact button {
font-size: 1.5rem;
font-family: 'Josefin Sans';
background: darkgrey;
color: #595959;
padding: 4px;
padding-right: 6px;
padding-left: 6px;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 10px;
right: -20px;
transition: all .4s ease;
}
.contact button:hover {
color: #ddae1a;
}
.contact-line {
margin-top: 170px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 350px;
background: #ddae1a;
position: relative;
}
.links {
display: flex;
position: relative;
max-width: 400px;
top: -5px;
left: 7px;
}
.links i {
font-size: 2.5rem;
margin-right: 15px;
}
.links p {
font-size: 1.5rem;
margin-right: 30px;
margin-top: 8px;
}
#facebook {
color: #3b64ed;
cursor: pointer;
}
#twitter {
color: #5effeb;
cursor: pointer;
}
#yelp {
color: red;
cursor: pointer;
}
.contact-design-wrap-left {
position: absolute;
left: 0;
top: 40px;
max-height: 500px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 55px;
right: 0;
transform: rotate(180deg);
}
.contact-design-wrap-left .bottom {
height: 0;
}
#align {
position: absolute;
left: 70px;
top: -15px;
}
#align2 {
position: absolute;
left: 68px;
top: -5px;
}
.grey {
border-left: 60px solid #666;
}
.light-grey {
border-right: 60px solid #848484;
}
.same {
border-left: 60px solid #848484;
}
.lighter {
border-right: 60px solid #a8a3a3;
}
.map {
position: relative;
top: 50px;
}
.map i {
position: absolute;
color: #ddae1a;
font-size: 4rem;
left: 50%;
margin-left: -24px;
}
.location .map .street-1 {
width: 300px;
position: relative;
top: 95px;
left: 170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-2 {
width: 300px;
position: relative;
top: 80px;
left: -170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-3 {
margin-top: 40px;
width: 190%;
position: relative;
top: 30px;
left: -140px;
height: 18px;
background-color: #848484;
border-radius: 8px;
}
.street-info {
color: white;
position: absolute;
font-family: 'Josefin Sans';
font-size: 1.2rem;
left: 20px;
padding-top: 3px;
}
.address {
position: absolute;
left: 50%;
top: 75px;
margin-left: -68.5px;
color: #ddae1a;
text-decoration: none;
font-family: 'Josefin Sans';
font-size: 1.2rem;
text-align: center;
}
.address:hover {
color: #ddae1a;
text-decoration: underline;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.8rem;
padding-bottom: 5px;
margin: 0 0 0 -253.89px;
}
/*----FOOTER----*/
#media screen and (max-width: 1700px) {
#align {
position: absolute;
left: 60px;
top: -10px;
}
#align2 {
position: absolute;
left: 58px;
top: 0px;
}
.contact-design-wrap-right {
position: absolute;
bottom: 40px;
right: 0;
transform: rotate(180deg);
}
.contact h1,
.location h1 {
font-size: 6rem;
height: 160px;
}
.contact p {
font-size: 1.5rem;
}
.contact-line {
margin-top: 160px;
margin-bottom: 30px;
width: 5px;
border-radius: 3px;
height: 270px;
background: #ddae1a;
position: relative;
}
.copyright {
position: absolute;
bottom: 0;
left: 50%;
font-family: 'Josefin Sans';
color: #a8a3a3;
font-size: 1.5rem;
padding-bottom: 5px;
margin: 0 0 0 -211.99px;
}
.contact textarea {
margin-top: 0;
}
.location .map .street-2 {
width: 280px;
position: relative;
top: 60px;
left: -170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.location .map .street-1 {
width: 280px;
position: relative;
top: 75px;
left: 170px;
height: 15px;
transform: rotate(90deg);
background-color: #848484;
border-radius: 5px;
}
.grey {
border-left: 50px solid #666;
}
.light-grey {
border-right: 50px solid #848484;
}
.same {
border-left: 50px solid #848484;
}
.lighter {
border-right: 50px solid #a8a3a3;
}
}
#media screen and (max-width: 1450px) {
.contact button {
bottom: 15px;
}
.links {
left: 10px;
}
}
#media screen and (max-width: 1400px) {
.links {
left: 40px;
}
.contact textarea {
width: 90%;
/*None of these work?
margin-left: auto;
margin-right: auto;
align-self: center;*/
}
}
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<footer>
<div class="contact-section-background">
</div>
<div class="contact-section">
<div class="contact-design-wrap-left">
<div class="top">
<div class="arrow-left lighter" id="align"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
<div class="arrow-top same"></div>
</div>
<div class="top-middle">
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right grey"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right move grey"></div>
</div>
<div class="bottom">
<div class="arrow-left light-grey"></div>
<div class="arrow-top same"></div>
<div class="arrow-left lighter" id="align2"></div>
</div>
</div>
<div class="hex">
<div class="back-to-top">Back to Top</div>
</div>
<div class="rhombus"></div>
<div class="contact">
<h1>Contact</h1>
<p class="number">[phone]</p>
<p class="email">fakeEmail#fake.com</p>
<div class="textarea">
<textarea name="" id="" cols="30" rows="0" placeholder="Send us a message:)"></textarea>
<button>Send</button>
<div class="links">
<p>Leave us a review!</p>
<i class="fab fa-facebook-square" id="facebook"></i>
<i class="fab fa-yelp" id="yelp"></i>
<i class="fab fa-twitter-square" id="twitter"></i>
</div>
</div>
</div>
<div class="contact-line"></div>
<div class="location">
<h1>Location</h1>
<div class="map">
<i class="fas fa-map-marker-alt"></i>
6140 E Main St.
<div class="street-1">
<p class="street-info">63rd St.</p>
</div>
<div class="street-2">
<p class="street-info">N Recker Rd.</p>
</div>
<div class="street-3">
<p class="street-info">US 60 E.</p>
</div>
</div>
</div>
<div class="contact-design-wrap-right">
<div class="top">
<div class="arrow-left lighter" id="align"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
<div class="arrow-top same"></div>
</div>
<div class="top-middle">
<div class="arrow-left light-grey"></div>
<div class="arrow-right grey"></div>
</div>
<div class="bottom-middle">
<div class="arrow-right grey"></div>
<div class="arrow-left light-grey"></div>
<div class="arrow-right move grey"></div>
</div>
<div class="bottom">
<div class="arrow-left light-grey"></div>
<div class="arrow-top same"></div>
<div class="arrow-left lighter" id="align2"></div>
</div>
</div>
<p class="copyright">© 2019 El Metate | All Rights Reserved</p>
</div>
</footer>

Answer 1

The easiest solution is to give the textarea display: block so that it honors left/right margins. You can update the css inside your final media query like this:
.contact textarea {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block;
}
But the min-width: 500px on the div surrounding the textarea is also causing some alignment issues. You may want to try adjusting that at smaller screen sizes as well.