title: 4 Divs side by side (Menu Bar)
body: <p>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?</p>
  
  <pre><code>&lt;div id="Menu" &gt;
       &lt;div id="M_1"&gt;&lt;a id="M_1_L" href="P4.html"&gt;Given&lt;/a&gt;&lt;/div&gt;
       &lt;div id="M_4"&gt;&lt;a id="M_4_L" href="P2.html"&gt;Received&lt;/a&gt;&lt;/div&gt;
       &lt;div id="M_3"&gt;&lt;a id="M_3_L" href="P3.html"&gt;Bucket List&lt;/a&gt;&lt;/div&gt;
       &lt;div id="M_2"&gt;&lt;a id="M_2_L" href="P1.html"&gt;Traditions&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>#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;
  }
  </code></pre>