creating a navbar, items using full space (css) - html

Question

I'm not an expert using css, after 1 hour of time spent on this problem I will ask the community.
my html code:
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
my css code:
.content2 {padding: 10px 30px; color: #fff}
.Menu {background: #022000; width: 1000px; height: 50px; margin: 20px auto; text-align: center}
.Menu a {float: left; height: 26px; width: 313px; padding: 12px 10px; color: #fff}
.Menu a:hover {background: #277521}
I would like the two items in my Menu class full fill the width of the navbar. Currently they don't take the complete width of the navbar.

Answer 1

Use width: 50%; and modify the padding as padding: 12px 0px;.
Explanation:
width: 50% : As there are 2 elements, this will enable each element to take 50% of the parent's width.
padding: 12px 0px : padding 0px for right and left helps remove the extra space required for each element.
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>

Answer 2

Try following way.
Give width:50% and box-sizing: border-box; to a. And change height:50px;
.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 50px;
width: 50%;
padding: 12px 10px;
color: #fff;
box-sizing: border-box;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>
Working Fiddle

Answer 3

Try it with flex. Add these styles:
.Menu {display: flex;}
.Menu a {flex: 1;}
This will work with any number of menu items, not only 2.
Tip: flex is a very powerful property and I suggest you research it a little if you are interested why my code works.

Answer 4

.content2 {
padding: 10px 30px;
color: #fff
}
.Menu {
background: #022000;
width: 1000px;
height: 50px;
margin: 20px auto;
text-align: center
}
.Menu a {
float: left;
height: 26px;
width: 50%;
padding: 12px 0px;
color: #fff;
background-color: yellow;
}
.Menu a:hover {
background: #277521
}
<div class="content2">
<div class="Menu">
All Investments (3)
Payouts (0)
</div>
...some other code
</div>