Why i can't horizontally align these 2 div boxes?

i'm trying to learn some css/html for web design (just for personal purpose) I was tryng to create a website for my community but i don't know why i can't align hotizontally the 2 boxes in the first img. But when i remove the text in the 1st box it fully work (second img). Where i'm wrong? Thanks to all for answering :)

no working code:

HTML

<div id="main">
  <p class="sf fade-in-up p1">Benvenuto sul nostro sito!</p><br>


  <div id="boxMain">
    <p class="p2 bebas">Discord <i class="fab fa-discord fa-sm animLinkPurple"></i></p>
    <p class="sub sf">Clicca qui sotto<br>per unirti al server</p>
    <p class="p3 bebas"><a class="animLinkPurple" href="http://discord.gg/Qc5ekKh">CLICCA QUI!</a></p>

  </div>

  <div id="boxMain">
    <p class="p2 bebas">Secondo Box</p>
    <p class="sub sf">Sottotitolo di prova</p>
  </div>


</div>

CSS:

#boxMain {
  display: inline-block;
  border-radius: 10px;
  border-bottom-width: 10px;
  border-bottom-style: solid;
  border-bottom-color: #283E56;
  padding: 0;
  margin: 50px 50px 0 50px;
  height: 500px;
  width: 450px;
  background-color: white;
  box-shadow: 1px 2px 109px 1px rgba(207,207,207,1);
  transition: border-bottom-color 0.3s linear;
}


#boxMain:hover{
  border-bottom-color: #1989AC;
  cursor: pointer;
}

Result: https://imgur.com/08TB1MJ

"Apparently" working code with less text:

    <div id="main">
  <p class="sf fade-in-up p1">Benvenuto sul nostro sito!</p><br>


  <div id="boxMain">
    <p class="p2 bebas">Discord <i class="fab fa-discord fa-sm animLinkPurple"></i></p>
    <p class="sub sf">Clicca qui sotto</p>

  </div>

  <div id="boxMain">
    <p class="p2 bebas">Secondo Box</p>
    <p class="sub sf">Sottotitolo di prova</p>
  </div>


</div>

CSS

#boxMain {
  display: inline-block;
  border-radius: 10px;
  border-bottom-width: 10px;
  border-bottom-style: solid;
  border-bottom-color: #283E56;
  padding: 0;
  margin: 50px 50px 0 50px;
  height: 500px;
  width: 450px;
  background-color: white;
  box-shadow: 1px 2px 109px 1px rgba(207,207,207,1);
  transition: border-bottom-color 0.3s linear;
}


#boxMain:hover{
  border-bottom-color: #1989AC;
  cursor: pointer;
}

Result: https://imgur.com/bJWoCDA