I have #members ul { display: flex; justify-content: space-around; flex-wrap: wrap; but the members are not wrapping. 
Hi @Porphyrogennitos can you post your entire code. There are a lot of things which can deny the wanted wrapping. When you are in anywhere working in the Curriculum please use the possibility to post your code here over the get a hint option.
Another option would be to have a look if the set property isn’t overwritten with some other properties by using the developertools in chrome or firefox.
Yes, but they do that when you want to make the browser smaller. I want them to be 5 and 5 by default.
Can you help?
What happens when you decrease the width of the div they are in?
They wrap but I want them already wrapped as soon as the page loads.
You can decrease the size of the flex container, still not sure of what you meant by wanting them to be wrapped:
section #members{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 500px; /*<-- the added line*/
}
if you are talking about making them look like one after the other, the list already does that and you don’t need a flex container.
The max-width property defines the maximum width of an element.
For more info here…
You can achieve this using the Grid, with something like that :
section #members{
display: grid;
grid-template-columns: repeat(4, 20%); /* to make a grid of 4 columns 20% each*/
justify-content: center; /* to center the items inside the grid*/
gap: 5px; /* here you specify the gap or space between items*/
}
section #members li{
background-color: red; /*This one just to show the items in color*/
}
The gap property also works with flexbox, although the browser support is still a bit lacking. I believe it should have landed in Safari but so far it’s only in the Technology Preview version.
So you are implying that instead of grid, I must use flexbox?
No, I’m just saying you can use Flexbox.
And how could I do that with flexbox?
Can you write it so I understand it?
I wasn’t really talking about the layout as much as just the gap property.
I’m sure you can do it with flexbox but it might not look exactly the same and the responsive behavior might be different. You would likely create two rows instead of trying to let the flex items wrap. Using flex-wrap would work fine without the gap, but with the gap it can become problematic.
You can read up on box-sizing.
Basically, it affects how the width and height of elements are calculated.
I would suggest you always set it along with any resets you have at the top of the CSS. This is usually how it is done.
*,
*::before,
*::after {
box-sizing: border-box;
}
Or (read more).
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}