HTML: container-fluid columns not aligned as expected-CodePudding

In my code below, I have used Bootstrap's container-fluid class, for a full width container. But the two columns I added are not aligned as I want to...

What I wanted is one column at the right side and the other at the very left, but it's not showing like that... Any help?

.test-shine {
   
   
   background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
    background-repeat: no-repeat;

    height: 500px;

    overflow: hidden;
    display: inline-block;
  }

<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <link rel="icon" type="image/png" href="./assets/images/letket-creative-logo.png" />
    <title>Digital Group</title>
    <link rel="apple-touch-icon" href="./assets/images/footerlogo.png">
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</section>
    <div >

        <div >
            <div  >

        
                <div >
                    <h4> Welcom To DigitalGroup</h4>

                    <h1>About Digital Group </h1>

                    <div >

                        <hr >
                        <hr>
                    </div>
                    <p> <b> </b>offering digital and technology
                        investments that deliver sustainable growth yet place equal value on small and large
                        enterprises.
                        <br><br><br>

                        <b>Since 2012,</b> we’re the creator company that produce digital segments. Our success has
                        brought
                        all the digital aspects into one template of DIGITAL GROUP, relying on a team of intelligent,
                        experienced, and specialists in Digital Architecture, Digital Marketing, and Digital e-commerce.
                    </p>

                    <a  data-aos="fade-up" data-aos-duration="900" href="about.html">
                        Read more >>


                    </a>
                </div>

                <div >

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

CodePudding user response：

</section>
  <div >

  <style>
 .test-shine {
   
   

    height: 500px;

    overflow: hidden;
    display: inline-block;
  


  }
  img{
    float: right;
  }
  </style>
</head>
<body>
</section>
<div >

    <div >
        <div  >

    
            <div >
                <h4> Welcom To DigitalGroup</h4>

                <h1>About Digital Group </h1>

                <div >

                    <hr >
                    <hr>
                </div>
                <p> <b> </b>offering digital and technology
                    investments that deliver sustainable growth yet place equal value on small and large
                    enterprises.
                    <br><br><br>

                    <b>Since 2012,</b> we’re the creator company that produce digital segments. Our success has
                    brought
                    all the digital aspects into one template of DIGITAL GROUP, relying on a team of intelligent,
                    experienced, and specialists in Digital Architecture, Digital Marketing, and Digital e-commerce.
                </p>

                <a  data-aos="fade-up" data-aos-duration="900" href="about.html">
                    Read more >>


                </a>
            </div>

            <div  >
              <img src="https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg" alt="">
   </div>
</div>
    </div>
    </div>

CodePudding user response：

You can use position for align the image in your secound right container. Add only background-position: right; to your .test-shine class.

.test-shine {


  background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
  background-repeat: no-repeat;

  height: 500px;
  width: 500px;
  background-position: right; /* this line is new */
  overflow: hidden;
  display: inline-block;
  
}

<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
<link rel="icon" type="image/png" href="./assets/images/letket-creative-logo.png" />
<title>Digital Group</title>
<link rel="apple-touch-icon" href="./assets/images/footerlogo.png">
<link href="assets/css/style.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</section>
<div >

  <div >
    <div  >


      <div >
        <h4> Welcom To DigitalGroup</h4>

        <h1>About Digital Group </h1>

        <div >

          <hr >
          <hr>
        </div>
        <p> <b> </b>offering digital and technology
          investments that deliver sustainable growth yet place equal value on small and large
          enterprises.
          <br><br><br>

          <b>Since 2012,</b> we’re the creator company that produce digital segments. Our success has
          brought
          all the digital aspects into one template of DIGITAL GROUP, relying on a team of intelligent,
          experienced, and specialists in Digital Architecture, Digital Marketing, and Digital e-commerce.
        </p>

        <a  data-aos="fade-up" data-aos-duration="900" href="about.html">
          Read more >>


        </a>
      </div>

      <div >

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