Bootstrap container not aligning properly

Question

I recently used bootstrap to help me align my projects portfolio on my website. Certainly it did what i was expecting except the time i run the website on my mobile. I used container on every div element to keep it inside the area but the result is totally different.

If i run the mobile phone emulator inside a desktop browser it will display the expected result however, if i run it in real cell phone the result is all messed up.

The link to my website is- www.ijatin.ca and visit the project section inside it and try to run on mobile phone emulator and on real phone you would see 2 different results. Can anyone tell, why is there such a difference and how can i overcome it? Thanks so much

Answer 1

I see that you've used Bootstrap 4 and the best formation of usage should be like,
container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container.

But in your code
container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container

You don't have to have a container div for each row. Container divs can be placed as a parent where you would want to place your child elements within a bootstrap specific width. So I suggest to change your code like below

<article id="work" style="display: block;" class="active">

  <div class="container">
    <h2 class="major">Projects</h2>
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12"> <!-- change column size according to your need -->
        <div class="card project-section">
          <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
            <p class="card-text">
              Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
              on the dashboard.

            </p>
            <div class="row">
              <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
              <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card project-section">
          <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
            <p class="card-text">
              Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
              on the dashboard.

            </p>
            <div class="row">
              <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
              <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card project-section">
          <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
            <p class="card-text">
              Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
              on the dashboard.

            </p>
            <div class="row">
              <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
              <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container offset-lg-1 row">
    <div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
      <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <div class="row">
          <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
          <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
        </div>
      </div>
    </div>
  </div>

  <div class="container offset-lg-1 row">
    <div class="card col-sm-12 col-lg-7 flaot-right project-section" style="width: 18rem;">
      <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <div class="row">
          <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
          <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
        </div>
      </div>
    </div>
  </div>

  <div class="container col-sm-12 offset-lg-1 row">
    <div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
      <img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <div class="row">
          <a href="https://github.com/Jatin-007/Emaily" target="_blank" class="btn btn-primary project-button"><span class="icon fa-github">  Github</span></a>
          <a href="#" class="btn btn-primary project-button disabled"><span class="icon far fa-desktop">  Website</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="close">Close</div>
</article>

This would look like

Hope this helps!