I'm trying to horizontally align two block elements and "display: inline-block" isn't working. I'm wondering if this is because I have unique margins set for each element. I don't understand CSS from a theoretical level. I will be adding a line to connect them visually once they're on the same horizontal line.
h2 {
  padding: 75px;
  margin-left: 30px;
  font-family: 'Nunito Sans', sans-serif;
}
#cal {
  font-family: 'Roboto', sans-serif;
  border: solid;
  border-radius: 25px;
  padding: 10px;
  margin-left: 350px;
  margin-right: 250px;
}
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal. I'm 28 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about web design and SEO. I built this site to feature my work.</p>