How would I code the following? what am I doing wrong? I get 4 rows of 3 for my bottom navigation. I should be getting 3 rows of 4.

1. At the bottom of the home page is a navigation list with the id bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. Be sure to include the WebKit browser extension in all of your flex styles.

my code:

nav#bottom ul {

display: -webkit-flex;

display: flex;

-webkit-flex-flow: row nowrap;

flex-flow: row nowrap;

justify-content: center;

}

2. Define flex values for ul elements within the bottom navigation list so that the width of those elements never exceeds 150 pixels but can shrink below that value.

my code:

nav#bottom ul li {

-webkit-flex: 0 1 150px;

flex: 0 1 150px;

}