HTML, CSS, Bootstrap - Horizontally align texts of different divs-CodePudding

I am using the container-lg class of Bootstrap, and I am experiencing the current situation:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <header>
      <div >
        <h1>Brand</h1>
      </div>
    </header>
    
    <main>
      <div  style="height: 400px;">
        <div >
          <h2>Left</h2>
        </div>
        
        <div  style="background-color: red;"></div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.

This is what I have tried:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <header>
      <div >
        <h1>Brand</h1>
      </div>
    </header>
    
    <main>
      <div >
        <div  style="height: 400px;">
          <div >
            <h2>Left</h2>
          </div>
        
          <div  style="background-color: red;"></div>
        </div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

But, as you can notice, this is not my expected behavior, because it affects to the right container.

Any ideas?

CodePudding user response：

Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>
  <header>
    <div >
      <h1>Brand</h1>
    </div>
  </header>

  <main>
    <div >
      <div >

        <div  style="height: 400px;">
          <div >
          </div>
          <div  style="background-color: red;">
          </div>
        </div>
      </div>

      <div  style="left:0; right:0; top:0;">

        <div  style="height: 400px;">
          <div >
            <h2>Left</h2>
          </div>

          <div >
            <h2>Right</h2>


          </div>
        </div>
      </div>
    </div>

  </main>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>