Responsive text box-CodePudding

How can text and border be centered aligned and made responsive.

When creating border its taking the full width of the page

.tul-help {
  margin: 50px 500px;
  border: 5px solid #103B04;
}

.tul-help p {
  display: table;
  margin: 0 auto;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-size: 30px;
  line-height: 45px;
  text-align: center;
  color: #103B04;
}

<div >
  <h3>How To Use:</h3>
  <p>Semicolons are as basic as a period stacked on top of a comma. Here are the rules for using semicolons correctly; we hope you're taking</p>
</div>

CodePudding user response：

There can be multiple possibilities:

You can use your HTML into fixed container and then you can set you define max-width for the class tul-help and make it center align
You can give your div class "tul-help" a max-width and make it center and using @media query you can adjust the max-width

Above both the way is feasible and help you out.

CodePudding user response：

Try using CSS Flexbox. For example like this.

.tul-help {
display: flex;
justify-content: center;
align-items: center;
height: 30%; // Or whatever height you want
}

.tul-help p {
margin: auto;
}