Bootstrap row not centering items-CodePudding

I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using . Any tips? Code below. I also added an image of how it looks when I inspect.

<h1> (SPH) </h1>
                <div >
                    <div >
                        <h3> Who We Are </h3>
                        <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
                    </div>
                    <div >
                        <h3> What We Do </h3>
                        <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
                    </div>
                </div>

CodePudding user response：

As mentioned in the comments.

You can use a class at the top of your page like : container.

Example:

<div class= container justify-content-center> /your code here/ </div>

CodePudding user response：

The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<div >
<h1 > (SPH) </h1>
  <div >
    <div >
      <h3> Who We Are </h3>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
    </div>
    <div >
      <h3> What We Do </h3>
      <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
    </div>
  </div>
</div>