How to Create Two HTML Buttons Side by Side

Position buttons next to each other in the center of page

you can add this style to your buttons:

#button1 , #button2 {
display:inline-block;
/* additional code */
}

this aligns your buttons inline. ('side by side') :)

Make two Form buttons side-by-side

Do you want like this:

.submit1 {
    background-color: #008CBA;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}
.submit2 {
    background-color: #BA002D;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    border: none;
}

.form1 {
  display:inline-block;
}
.center {
  text-align:center;
}

 <body>
   <div class="center">
     <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Express Interest" class="submit1">
    </form>
    
    <form class="form1" action ="listingsPage.php" method="post">
        <input type="submit" value="Back to Listings" class="submit2">
    </form>
   </div>
  </body>

How do I make two buttons side by side and responsive?

Wrap them in a div, give them percentage width, make div have

div{
    display: flex; 
    justify-content: space-between;
}

Padding could possibly mess up the responsiveness,so be aware of that as well

Display buttons side by side instead of stacked

Try to use display flex for it

p {
  display: flex;
  align-items: center;
  justify-content: center;
}

p Button {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Check it out
https://jsfiddle.net/L95j0kd7/1/

Two buttons side by side

If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):

<style>
    .button {
        appearance: button;
        -moz-appearance: button;
        -webkit-appearance: button;
        text-decoration: none; 
        font: menu; 
        color: ButtonText;
        display: inline-block; 
        padding: 2px 8px;
    }
</style>

<div class="container">
    <a href="http://trinker.github.io/qdap_dev/paste2.html" class="button">paste2</a>
    <a href="http://trinker.github.io/qdap_dev/colSplit.html" class="button">colSplit</a> text
</div>

You could also do <a href="..."><button>paste2</button></a> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.

Cannot align two buttons side by side

You are not showing your links. I hope you connected the bootstrap needful task. Here I modified your code.

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href = "index.html"><h3 id = "title" style="color: #0099ff;">Student Sources</h3</a>
<a href = "stuff.html">
<button id = "stuff" style=" display:inline-block;">Articles/Presentations</button>
</a>
<a href = "aboutus.html"><button id = "aboutus" style="display:inline-block;">About Us</button>
</a>

<!-- Navbar content -->
</nav>

Here I removed only the margin-right: 900px; and float: right portion.

CSS:

.navbar navbar-expand-lg navbar-light bg-light{

background-color: blue;
color: blue;
}

#topics{

}
a, a:hover, a:focus {
text-decoration: none;
}

#title{
transition-duration: .1s;
}
#title:hover{
text-decoration: underline;
text-decoration-color: #FFAE00;

}

#stuff{

padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
color: #0097CF;
border-style: none;
margin-bottom: 0px; 
color: #0091AE;
transition-duration: .1s;
}

#stuff:hover{

border-style: solid;
border-color:  #FFAE00;
}

Here I removed only the margin-right: 800px; from #stuff .

This is a working fiddle for your question. Check it hope it will help you.
https://jsfiddle.net/tp43gkvn/2/