List Items not filling Unordered List

Report · Mar 28, 2019

Hello,

I'm pretty new to Web Development, and I'm trying to create a simple website. On one of my pages I have multiple list items within an unordered list. I've set the flex-basis to 33.33% and allowed it to wrap in hopes of getting three list items in each row. However, the list items are not filling the entire width of the unordered list; there is a significant gap on the left side. I would be grateful for any suggestions on how to make the list items fill the width of the unordered list.

Below I have attached a picture as well as the relevant HTML and CSS.

Thanks in advance!

HTML:

<ul>

<li>First Video </li>

<li>Second Video</li>

<li>Third Video </li>

<li>Fourth Video </li>

<li>Fifth Video </li>

<li>Sixth Video </li>

</ul>

</main>

CSS:

.container {

width: 100%;

margin: auto;

max-width: 1000px;

text-decoration: none;

font-weight: 100;

text-align: center;

display: flex;

justify-content: center;

}

ul {

list-style-type: none;

display: flex;

font-weight: 400;

margin: 0 auto;

text-align: center;

flex-wrap: wrap;

border: medium solid #000000;

}

li {

min-width: 250px;

padding-top: 40px;

padding-right: 40px;

padding-left: 40px;

padding-bottom: 40px;

text-align: center;

display: flex;

margin: auto 0;

border: thin solid #000000;

flex-basis: 33.33%;

justify-content: center;

flex-wrap: wrap;

position: static;

}

Report · Mar 28, 2019

Before we go any deeper, is this supposed to be a menu?

And what do you envision for mobile and tablet screens?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 28, 2019

Here's your solution:

http://projectseven.com/csslab/flexbox/hz-list/

Report · Mar 28, 2019

ALsp wrote
Here's your solution:
http://projectseven.com/csslab/flexbox/hz-list/

You sure that's working Al - dont do anything in my browsers?

Unless I'm a little bit crazy shouldnt there be a li class:

li.flex-root-li

But I dont see one in the html:

<li><a href="#">Menu Item Number 5</a></li>

</ul>

Report · Mar 28, 2019

You sure that's working Al - dont do anything in my browsers?

I copied the CSS displayed in the black content area from another page in that folder. The actual CSS is in the head is fine and the menu displays fine in Chrome, Firefox, Edge, iPhone, and Android for me.

I corrected the CSS in the content area. Good catch 🙂

Borders is always going to be a problem because of the wrap. Been there.

Report · Mar 28, 2019

ALsp wrote
You sure that's working Al - dont do anything in my browsers?
I copied the CSS displayed in the black content area from another page in that folder. The actual CSS is in the head is fine and the menu displays fine in Chrome, Firefox, Edge, iPhone, and Android for me.
I corrected the CSS in the content area. Good catch 🙂
Borders is always going to be a problem because of the wrap. Been there.

Shadow is good

Report · Mar 28, 2019

It sometimes helps, but besides, Ben likes your answer and I'm amazed because neither my code or yours uses Bootstrap.

Report · Mar 28, 2019

ALsp wrote
It sometimes helps, but besides, Ben likes your answer and I'm amazed because neither my code or yours uses Bootstrap.

I did't take you to be the envious type

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 28, 2019

I'm not. Now the OP has 2 excellent examples to learn from... and the planet hasn't been harmed by another useless Bootstrap implementation 🙂

Report · Mar 28, 2019

Anyway Ive gone nuts and created an option. The css is a bit long-winded as I wanted to give all the boxes a thin border, don't know if there is a better way to apply a thin border like border-collapse works on a table.

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

ul.container {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: auto;

padding: 0;

border: thin solid #000000;

}

li:nth-child(1), li:nth-child(2) {

border-bottom: thin solid #000000;

border-right: thin solid #000000;

}

li:nth-child(3) {

border-bottom: thin solid #000000;

}

li:nth-child(4), li:nth-child(5) {

border-right: thin solid #000000;

}

li {

display: flex;

justify-content: center;

flex-basis: 33.33%;

font-weight: 400;

padding: 40px 0;

margin: 0;

}

@media screen and (max-width: 768px) {

li {

flex-basis: 50%;

}

li:nth-child(2) {

border-right: none;

}

li:nth-child(3) {

border-right: thin solid #000000;

}

li:nth-child(4) {

border-right: none;

border-bottom: thin solid #000000;

}

@media screen and (max-width: 480px) {

ul.container {

width: 95%;

}

li:nth-child(1), li:nth-child(3) {

border-right: none;

}

li:nth-child(5) {

border-right: none;

border-bottom: thin solid #000000;

}

li {

flex-basis: 100%;

}

</style>

</head>

<body>

<li>First Video </li>

<li>Second Video</li>

<li>Third Video </li>

<li>Fourth Video </li>

<li>Fifth Video </li>

<li>Sixth Video </li>

</ul>

</body>

</html>