title: How can I display 2 big buttons next to each other html & css
body: <p>I'm new to html and css and I'm trying to make a webpage.<br>
  I created 2 big buttons, each about half the size of the screen. The problem is I can't display them next to each other. Instead they are displayed one above the other.</p>
  
  <p>The little piece of html is below the css of the added snippet which probably looks a bit messy.</p>
  
  <p><strong>EDIT</strong>: the idea is to create a page divided in 2 like --> <a href="http://www.masitupungato.com/" rel="nofollow noreferrer">http://www.masitupungato.com/</a> &lt;-- but a very basic look</p>
  
  <p>Here are the screenshots:</p>
  
  <p><img src="https://i.stack.imgur.com/PjxFF.png" alt="Button supposed to be on the left side">
  <img src="https://i.stack.imgur.com/zGtI5.png" alt="Button supposed to be on the right side"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   background: #191B1C;
   color: white;
   font-family: helvetica;
  }
  
  ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
  }
  
  li a{
   color: white;
   background: #2A2F30;
   height: 616px;
   width: 650px;
   border-radius: 40px;
   text-align: center;
   font-size: 100px;
   font-weight: bold;
   text-decoration: none; 
   padding-top: 400px; 
   display: inline-block;
  }
  
  li a:hover{
   background: #2FA2C4;
   border: 4px solid white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
   &lt;ul&gt;
    &lt;li id="left-container"&gt;&lt;a href="#"&gt;Browse&lt;/a&gt;&lt;/li&gt;
    &lt;li id="right-container"&gt;&lt;a href="#"&gt;Upload&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>