fill the entire width of a div - menu - html

Question

Here is my code:
.row {
width: 800px;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
}
li {
width: 100%;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I want the menu to fill the full width of the div. The distances are the same and the elements are to coincide with the edges of div test.
This is what it would look like:
Test
Best Regards and Thank You

Answer 1

justify-content is what you probably look for : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
demo
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
justify-content:space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>

Answer 2

.row {
width: 800px;
overflow-x: hidden;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
width: 100%;
padding: 0;
}
li {
width: 100%;
text-align: center;
}
.test {
width: 100%;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
<div class="test">
<p> </p>
</div>
</div>
Try this😊

Answer 3

.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
width: 100%;
}
This should fix your problem

Answer 4

display: flex; and justify-content: space-between; get you there.
I also added:
* {
margin: 0;
padding: 0;
}
I also removed (commented):
li {
width: 100%;
}
to get rid of the default margin and padding on the body element.
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
}
/*
li {
width: 100%;
}
*/
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>

Answer 5

You need to configure your flex better. Here is a solution
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: stretch;
justify-content: space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>