如何将div与flexbox对齐

Question

我已经建立了一个英雄形象，其中div元素在左侧，但现在我想改变它并把它放在右侧。

我是flexbox的新手，我希望你能帮我解决这个问题

<section class="error-image">
  <div class="container hero-container" >
    <div class="row">
      <div class="col-md-8 col-sm-12">
        <h1>Pulse Model Management</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetuer a dipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
        </p>
        <a href="Request/index.html" class="btn cta-button float-md-left float-sm-none">Try for free</a>
      </div>
    </div>
  </div>
</section>

CSS：

hero-container具有flexbox样式

.hero-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

和.error-image容器背景图片

.error-image{
background: url(../img/404.jpg);
height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;}

以下是它的图像，它现在看起来如何，我添加了photoshop边框，以显示它应该在哪里，我用flex-end等尝试了一切，但它对我没用。