Not Able to Align div to the right in bootstrap-CodePudding

So I am making a simple website with Bootstrap but problem here is that I want to assign my 2nd div (the one with lorem text) to the right of the webpage. But it's going down even when I tried using ms-0 and CSS text-align ? Can You please suggest me that how can I assign that div in the right of the page?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<section >
  <div >
    <h1 >What We Offer</h1>
    <p >Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

    <div >

    </div>

    <div >
      <div >
        <div >
          <h2>Java</h2>

          <div  style="width: 100%;">100%</div>
        </div>

        <div >
          <h2>HTML & CSS</h2>

          <div  style="width: 100%;">75%</div>
        </div>

        <div >
          <h2>ReactJs</h2>

          <div  style="width: 100%;">55%</div>
        </div>

        <div >
          <h2>C  </h2>
          <div  style="width: 100%; height: 15px;">55%</div>
        </div>

        <div >
          <h2>Python</h1>

            <div  style="width: 100%;">50%</div>
        </div>


      </div>

      <div >
        <!-- How to align this to right ? -->
        <div >
          <div >
            <i  aria-hidden="true"></i>
          </div>

          <div >
            <h2>Hi there</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus ullam quas non rem nostrum, laborum enim harum hic esse sed totam asperiores impedit alias! Maiores distinctio natus, illo at accusantium veniam enim atque? Ipsum voluptate
              sint commodi totam maiores cumque!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

you can do this way. you can put the <p> and <h1> inside a div with display flex

<div >
  <h1 >What We Offer</h1>
  <p >Lorem ipsum dolor sit amet consectetur 
   adipisicing elit.</p>
</div>

you can adjust the position just like you want https://getbootstrap.com/docs/4.3/utilities/flex/

CodePudding user response：

<div >
  <h1>What We Offer</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>