Flexbox horizontal align has stopped working?

Question

My horizontal align (justify-content: center) is not working on one of my sections. When I take the paragraph elements out everything seems to work fine, any help would be appreciated! Thank you.

Here is the code:

https://jsfiddle.net/vfo5urd4/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 30 Dec 2015 06:31:18 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>St Philips</title>
<link rel="stylesheet" type="text/css" href="stphilipscss.css">
<link href='https://fonts.googleapis.com/css?  family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700'  rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body> 






    <!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->
    <header>

        <h4 id="textlogo">ST PHILIPS NERI</h4>
            <nav>
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </nav>

    </header>
    <!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER-->


    <!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->
    <section id="section1">

        <article>
        <h1><i>I am the way,</i> the truth, and the life.</h1>
        </article>
            <a href="#"><button type="button">Come in</button></a>

    </section>
    <!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1-->

    <section id="section2">
    <article>
    <h1>You're Welcome</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut       posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra  tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis.</p>
    <p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p>
    </article>
    </section>


   </body>
   </html>



body{
margin:0px;
/*overflow:hidden;*/
}


header{
display:flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
background-color:white;
border-bottom-width:1px;
border-color:#e5e5e5;
border-bottom-style:solid;
justify-content:space-between;


}



#textlogo{
margin:0px;
color:#191919;
font-family: open-sans, sans-serif;f;
font-weight:700;
display:inline-block;
margin-left:100px;
font-size:17px;
visibility:hidden;
}

nav{
margin-right:100px;
}

nav li{
display:inline;
padding:10px;
}

a{
color:#191919;
list-style-type:none;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size:15px;
}



#section1{
height:667px;
background-            image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_     stones_zpsy5twolwx.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;

}


#section1 article h1{
color:white;
font-size:63px;
font-family: 'open sans', serif;
font-weight:700;
margin-bottom:100px;
padding-top:150px;
margin-left:100px;
margin-right:100px;
}




button{
background-color:transparent;
color:white;
border-color:white;
border-style:solid;
font-size:25px;
border-width:1px;
font-family:'Open Sans';
font-weight:300;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
cursor:pointer;
}

#section2{
height:600px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}



h1 i{
font-family: 'Playfair Display', serif;
}

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

My horizontal align (justify-content: center) is not working on one of my sections.

There are two sections in your code. I'll address both.

In #section1, the flex container has flex-direction: column. This means the main axis is vertical.

The justify-content property works along the main axis, so in this case you would use justify-content for vertical, not horizontal, alignment.

For horizontal alignment in column direction use align-items, align-content and align-self, which work along the cross-axis.

Learn more about main-axis / cross-axis and flex alignment properties here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

In #section2, justify-content: center is working fine. The problem is the flex item occupies the full width of the container, so there's no larger space in which to center.

To see what I mean, give the flex item (article) a width: 50%: Revised Demo

edited May 23 '17 at 12:24

Community

1
1

answered Jan 20 '16 at 17:59

Michael Benjamin

346,931
104
581
701

I am referring to #section2 – OJM Jan 20 '16 at 18:05
@OJM, I hope this answer was clear. If you have a question let me know. Not sure what you mean in your comment. – Michael Benjamin Apr 10 '16 at 15:22
For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. – Michael Benjamin Dec 23 '16 at 18:47

Flexbox horizontal align has stopped working?

1 Answers1