What I can not understand what is the matter? Why it happens? Please help me figure it out! All the layout on Bootstrap for me.

With the full size of the screen divs in this form, the picture and under it is a white plate with text, so this is what I need.

When you shrink the screen, the divs will adapt and shrink, everything is as it should be.

But it is necessary to reach the screen resolution, where two divs do not fit, and they begin to line up alone under one (this is also normal). But the following happens: the picture gets into the desired position, and the div with a white plate on which the text is shifted to the left: enter image description here

Tell me how to fix it? Here is the section code (do not judge strictly for writing the code, just learning):

HTML code:

<section id="latest-works"> <div class="container"> <div class="row text-center"> <div class="col-lg-8 col-lg-offset-2"> <h2>Check out our latest works</h2> <p class="large">Magnis modipsae que voloratati andigen daepeditem quiate re porem aut labor.</p> </div> </div> <div class="row text-center cont"> <div class="col-md-6"> <div class="item-works"> <img src="img/work1.jpg" alt=""> <div class="works"> <h4>Grand Motel gets an identity brushup</h4> <p>Identity</p> </div> </div> </div> <div class="col-md-6"> <div class="item-works"> <img src="img/work2.jpg" alt=""> <div class="works"> <h4>Grand Motel gets an identity brushup</h4> <p>Identity</p> </div> </div> </div> </div> </div> </section>

CSS code:

 body{ background: #fff; font-family: 'Source Sans Pro', sans-serif; /*font-family: 'Lato', sans- serif;*/ font-size: 22px; color: #73879c; font-weight: 400; } img{ max-width: 100%; height: auto; } h1{ font-family: 'Lato', sans-serif; font-size: 78px; color: #fff; font-weight: 900; } h2{ font-family: 'Lato', sans-serif; font-size: 44px; color: #506a85; font-weight: 700; } h3{ font-family: 'Lato', sans-serif; font-size: 26px; color: #506a85; font-weight: 700; } h4{ font-family: 'Lato', sans-serif; font-size: 20px; color: #506a85; font-weight: 700; } /* ============================latest-works============================== */ #latest-works{ padding: 80px 0; background: #f2f5f7; } #latest-works .works{ background: #fff; padding: 10px; box-sizing: border-box; } .works p{ font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 400; color: #73879c; } .cont{ margin-top: 60px; }

Raised to the main page by a community spirit member ♦ yesterday .

This question contains answers that can be both good and bad; the system offered them for verification.

  • Link to the site skinte - tirael8
  • Since I'm just learning, the landing page which I am building up is located locally on the computer. - nik_gorinich
  • And how did you create it if you do not know the code? - tirael8
  • I do not know, I know! But the code on the computer is local, how can I show it to you? Or will you have enough of a piece of code in this section that I can’t do? - nik_gorinich
  • Show at least a piece of code, and the CSS code for this piece is tirael8

2 answers 2

In each row, the sum of col-xx-x should be 12. You have col-lg-8 in your first row, you must have col-lg-12

 <div class='row'> <div class='col-lg-12'> <!-- Ваш код --> </div> </div> <div class='row'> <div class='col-lg-6'> <!-- Ваш код --> </div> <div class='col-lg-6'> <!-- Ваш код --> </div> </div> <div class='row'> <div class='col-lg-3'> <!-- Ваш код --> </div> <div class='col-lg-4'> <!-- Ваш код --> </div> <div class='col-lg-5'> <!-- Ваш код --> </div> </div>

w3school is a good resource for learning and not only

    If you want the text to be centered, it is easier to initially insert it into the container with:

     display: flex; justify-content: center;

    And then no matter how you change the width of the browser \ screen, it will always remain in the center of the width.

    Or you can make a block of 100% width with a fixed height you need, whose style will be

     display: flex; justify-content: center; align-items:center;

    this will place the text in the center of the block.