How To Line Things Up - html

Question

I am trying to get two things to line up for HTML. Instead, I get them on top of each other. What I really want is to have them next to each other like websites do (where at the top you can choose between like 6 things and they take you to different parts of the website).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>

Answer 1

As another stated, you can use display: inline-block to get horizontal alignment of block elements.
I also added vertical-align: center to maintain a centered position when hovered, since the size changes. You can change center to top or another value if needed.
I also removed redundant CSS rules, shrinking your CSS down to around half its original size.
#home, #Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
display: inline-block;
vertical-align: center;
}
#home:hover, #Alt:hover {
background: #6495ED;
border-radius: 50px;
width: 105px;
line-height: 55px;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>

Answer 2

<div>s naturally stack over one-another as they carry a block display by default.
In order to line them up, you may consider setting an inline-block display for both the #home and #Alt:
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
You may also add a vertical-align: middle for a better appearance on hover (as suggested by another answer).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
<div id="home">Home</div>
<div id="Alt">test</div>