Can't move div with flex. How????

Question

Layout

In short, below is the code. The bottom line is that I wanted to move the div, and flex does not work. I don't want to do it through transform. For some reason, you can't remove the
HTML margin from a div

<div class="info_about_us">
        <h2 class="title_about_us">
          ABOUT US
        </h2>
        <p class="text_about_us">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio hic, consequuntur et quaerat! Asperiores hic molestias enim pariatur neque cupiditate, maxime, nihil. Accusamus, ratione placeat harum impedit, dolorum repudiandae perferendis.
          A, atque tenetur reiciendis quod eveniet fuga omnis, recusandae ullam eius id rem, unde. Ipsum, vero, similique. Eum repellat, reprehenderit adipisci quis, rerum architecto, nulla necessitatibus ullam distinctio nesciunt itaque.
        </p>

        <form action="" class="read_more">
          <input type="button" class="button_read_more">
        </form>
      </div>

css

.info_about_us {
  display: flex;
  justify-content: end;
  width: 500px;
  margin: 0;
}

.title_about_us {
  margin: 0;
}

.text_about_us {
  margin: 0;
}

.read_more {
  margin: 0;
}

.button_resd_more {
  margin: 0;
}

Answer 1

You probably wanted to align the content to the right?
If yes, then justify-content: flex-end;
remove margin and padding
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
because margin works great for you:
https://jsfiddle.net/khgb2pw0/14/

Answer 2

justify-content: flex-end;