4 Divs side by side (Menu Bar) - css

Question

I need to have these divs side by side for a menu bar but up until now it keeps stacking up on each other. I have tried doing margin-right/left/top/bottom, padding, etc... but can't get it to work, any suggestions?
<div id="Menu" >
<div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
<div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
<div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
<div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>
The CSS is:
#Menu
{
width: 50%; height: 40px; background-color: blue; margin-left: auto;
margin-right: auto; margin-top: 20px; border-radius: 20px;
}
#M_1
{
text-align: center; width: 20%; background-color: black;
}
#M_2
{
text-align: center; width: 20%; background-color: black;
}
#M_3
{
text-align: center; width: 20%; background-color: black;
}
#M_4
{
text-align: center; width: 20%; background-color: black;
}

Answer 1

add these two for each one
#M_1
{
display: inline-block;
float: left;
}
if that doesn't fit them all in, try changing 1 or 2 or all of them to 19% width instead

Answer 2

You need to float: left them or set them to display: inline-block.

Answer 3

You can tidy your CSS by merging selectors.
#menu{
display:table;width: 50%; height: 40px; background-color: blue;
margin:20px auto; border-radius: 20px;
}
#menu > div{
text-align: center; background-color: black;display:table-cell
}

Answer 4

This best thing to do would be:
<ul>
<li>given</li><li>
received</li>
</ul>
Ul {
Width:50%;
Height:40px;
Background: blue;
Margin: 0 auto;
}
Ul li {
Display:inline-block;
Width:20%;
Background:#000;
Text-align: center;
}
Having the closing tag and open tag next to each other stops inline-block from leaving a gap between the elements.