How can I display 2 big buttons next to each other html & css

Question

I'm new to html and css and I'm trying to make a webpage.
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.

The little piece of html is below the css of the added snippet which probably looks a bit messy.

EDIT: the idea is to create a page divided in 2 like --> http://www.masitupungato.com/ <-- but a very basic look

Here are the screenshots:

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;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>

Answer 1

Thank you for the quick answers guys. Both solutions worked. If i use ul li {float: left;} the footer (wich i didnt insert in my snippet here) pops up but thats not a problem.

I had tried float: left; by writing it in my div class wich didnt work. Anyway, thanks :)

Answer 2

simple display:flex; should do it.

body {
	background: #191B1C;
	color: white;
	font-family: helvetica;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
    display: flex;
}

li a{
	color: white;
	background: #2A2F30;
    display-inline:block;
	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;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>

Answer 3

Use display: table-cell; on the li items.

li {
  display: table-cell;
}

https://jsfiddle.net/9627av37/1/

Answer 4

You can use table with 50% width for each td and get the button inside of them like

<table width="100%" border="1">
   <tbody>
      <tr>
         <td width="50%" align="center"><button>first</button></td>
         <td width="50%" align="center"><button>second</button></td>
      </tr>
   </tbody>
</table>

Although this is not the best case, but you can use for your thing, best would be using bootstrap and other libraries that gives you grid system to do this.

Please look in those libraries too.

Answer 5

Add style for ul li

ul li {
    float:left; //or display:inline-block;
}

body {
	background: #191B1C;
	color: white;
	font-family: helvetica;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul li {
  float:left
}

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;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>

Answer 6

body {
	background: #191B1C;
	color: white;
	font-family: helvetica;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li { display: inline-block;}

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;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>

Just add li { display: inline-block; } to the CSS and pray users have a window that wide.