Centre not working

[broomeGirl]

Hi everyone would really appreciate some insight as to why this code is not working.

See screenshot.  Thanks 🙂

<!--Center Everything Start-->

<div class="center">
<h2 class="smallerh2Centre" >Nine-bot Segway Scooter</h2>
<br>
<img src="images/scooters/Ninebot-E-Scooter-500.png" width="419" height="445" alt="Sunrise E-Scooter" class="img-responsive" />
<h3 class="lowerCase" >Just what you need for that Cable Beach sunset!</h3>
<h4 class="lowerCase">From $50 per day (24 hours)</h4>
</div>
<!--Center Everything End-->

THE CSS

.center {
height: 500px;
display: flex;
align-items: center;
justify-content: center;}

[BenPleysier · Accepted solution]

Flexbox is a single dimension layout element. It can be either in a  horizontal or a vertical vertical direction. The default is horiontal. To change it to a vertical direction, you will need to add 

flex-direction: column;

as in 

.center {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

[broomeGirl]

OMG thank you so much 🙂

[broomeGirl]

Sorry wanted to break this div up with a white background but got this, see attached.

How do I make the background full width?

[broomeGirl]

Sorry forgot to send CSS

.center {
height: 800px;
background-size: cover;
margin: 0;
width: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #fff;
padding: 30px 0px 30px 0px;}

[broomeGirl]

and woops again but realised I put vh instead of vw but now I get this

[osgood_]

and woops again but realised I put vh instead of vw but now I get this

By @broomeGirl

Why don't you post the code here for the whole page + the css, that way you might get more answers?

[BenPleysier]

This is my interpretation of what has happened:

1. the area between the two green lines is the width of the container or wrapper. 

2. the CSS starts the `,center` element at the left border container.

3. because the width of  `.center` has been set at 100% of the width of the screen (100vw), `.center` overflows the right border of the container.

What I would to fix this:

1. end (e.g. </div>) the existing container prior to the `.center` element

2. restart (e.g. <div class="container">) the existing container after the `.center` element.

[broomeGirl]

You are a legend!  There was a missing div before the Center Container.  The section is now full width 🙂 Now I must have another one somewhere because the background colour (orange) is bleeding underneath the image above of the scooter and also under the copywrite notice, along with some white.

[Nancy OShea]

See if this helps you.

[broomeGirl]

Thanks so much Nancy, I have solved the first part of the problem with the closing of the div 🙂

[Nancy OShea]

You can achieve desired results with less code using CSS Grids instead of Flexbox.

Give it a try.  It's good to know both.