Put 2 buttons div on my banner and center

Question

I would like to put 2 buttons div (register and login) on my banner and center. However I think that I already have a problem with my blocks on my html ??

Here is an overview of my website in below.

screenshot:

My first problem is that I don't can to use the margin-left or margin-right to move my button "register" or "login" for center.

My problem comes perhaps from code HTML, Is it a problem with my blocks ? Here is my code HTML

<div class="my-banner">
    <img class="banner" src="images/slider.jpg"/>
    <div class="transparent"></div> 
    <a href="index.php"><img class="picture-logo" src="images/logo.png"/></a>
    <div class="container">
      <div class="myButtonRegister"><a href="lolo.php">REGISTER</a></div>
      <div class="myButtonLogin"><a href="lolo.php">LOGIN</a></div>
      <div class="topnav">
        <a class="active" href="index.php">HOME</a>
        <a href="#">ABOUT US</a>
        <a href="#">INVESTEMENT PLAN</a>
        <a href="#">NEWS</a>
        <a href="#">FAQS</a>
        <a href="#">RULES</a>
        <a href="#">CONTACT US</a>
      </div>
    </div>
</div>

Here is my code CSS

.myButtonRegister{
  margin-top: 342px;
  float: left;
  background-color: #C22312;
  color: white;
  height: 48px;
  width: 168px;
  text-align: center;
  color: white; 
  font-family: 'Pridi', serif;
  font-size: 26px;
  padding-top: 10px; 
  word-spacing: 0px;

}

.myButtonRegister a {
  color: #f2f2f2;
  text-decoration: none;

}

.myButtonLogin{
  margin-top: 342px;
  float: left;
  background-color: black;
  color: white;
  height: 48px;
  width: 168px;
  text-align: center;
  color: white; 
  font-family: 'Pridi', serif;
  font-size: 26px;
  padding-top: 10px; 
  word-spacing: 0px;

}

Do you have an idea plase ?

Answer 1

Just add a father box to your buttons and use flex to align your buttons. Here is an example:

.container {
  height: 200px;
  width: 100%;
  background: #eee;
}

.container .subcontainer {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="subcontainer">
    <button>Login</button>
    <button>Register</button>
  </div>
  <!--NAV-->
</div>