htmlcssflexboxright-align

A div in right with restricted width

Page width available is 1600 px, I was trying to align the div in right, and with max-width: 1200px. But that is not happening.

.csystem {
  display: flex;
  max-width: 1200px;
  flex-direction: column;
  justify-content: flex-end
}
<div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

Solution

  • You should use align-items not justify-content because you changed the flex-direction to column

    .csystem {
  display: flex;
  max-width: 1200px;
  /* margin-left: auto; */ /* If you wnat the div to be on the right */
  flex-direction: column;
  align-items: flex-end;
}
    <div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>