There is a picture and blocks that should, as it were, touch this line, if done on one width and adjust everything to minus margins, then the norms, but on large screens it breaks because the picture (this line) is stretched and you need to set other indents. How to make everything be normal at all resolutions?
.quarters{ min-height: 800px; background: url(https://i.stack.imgur.com/8ypWz.jpg) no-repeat; background-size: cover; padding: 200px 0 0 0; } .line_quarters{ width: 100%; margin-bottom: 0; } .block_querters_borders{ height: 260px; border-left: 2px solid #34cb4d; margin-right: 100px; } .block_querters_borders:nth-of-type(2){ margin: 0 100px 0 0; } .block_querters_borders:&:last-child{ margin: 0 0 0 0; } .first_text_quarters{ width: 184px; border-bottom: 2px solid #34cb4d; margin: 0 0 0 0; } .first_text_quarters h2{ font-family: "Jura"; font-weight: 700; color: #131314; font-size: 18px; text-align: right; margin: 0 0 4px 0; } .block_querters_borders ul{ margin-top: 20px; } .block_querters_borders ul li{ color: #ffffff; font-family: "Jura"; font-size: 14px; font-weight: 700; display: flex; margin-top: 16px; } .block_querters_borders ul li:before,{ width: 25px; height: 2px; box-shadow: 0 0 27px 1px rgba(37, 235, 70, 0.61); background: #34cb4d; content:""; float:left; overflow:hidden; margin:10px 15px 0 0; } .line{ width: 100%; margin: 0; } .line_quarters_bottom{ width: 100%; margin-top: 0; } .bottom_querters_borders{ height: 280px; border-left: 2px solid #34cb4d; margin-right: 200px; display: flex; flex-direction: column; justify-content: flex-end; } .bottom_querters_borders:last-child{ height:150px; margin: 0 0 0 0; } .two_text_quarters{ width: 184px; border-bottom: 2px solid #34cb4d; } .two_text_quarters h2{ font-family: "Jura"; font-weight: 700; color: #131314; font-size: 18px; text-align: right; margin: 0 0 4px 0; } .two_text_quarters ul{ margin-top: 20px; } .two_text_quarters ul li{ color: #ffffff; font-family: "Jura"; font-size: 14px; font-weight: 700; display: flex; margin-top: 16px; } .two_text_quarters ul li:before,{ width: 25px; height: 2px; box-shadow: 0 0 27px 1px rgba(37, 235, 70, 0.61); background: #34cb4d; content:""; float:left; overflow:hidden; margin:10px 15px 0 0; } <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Watt</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="dist/main.css"> </head> <body> <div class="wrapper"> <section class="quarters container-fluid " id="quarters"> <div class="row line_quarters justify-content-center"> <div class="block_querters_borders"> <div class="first_text_quarters"> <h2>II квартал 2018</h2> </div> <ul> <li> Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit, </li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> </ul> </div> <div class="block_querters_borders"> <div class="first_text_quarters"> <h2>IV квартал 2018</h2> </div> <ul> <li>Lorem ipsum dolor sit amet,</li> <li>consectetur adipisicing elit,</li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> </ul> </div> <div class="block_querters_borders"> <div class="first_text_quarters"> <h2>I квартал 2019</h2> </div> <ul> <li>Lorem ipsum dolor sit amet,</li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> </ul> </div> </div> <div class="row line justify-content-center"> <img src="https://i.stack.imgur.com/4TW9k.png" alt="line"> </div> <div class="row line_quarters_bottom justify-content-center"> <div class="bottom_querters_borders"> <div class="two_text_quarters"> <h2>III квартал 2018</h2> </div> <ul> <li>Lorem ipsum dolor sit amet,</li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> <li> Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit, </li> <li>sed do eiusmod tempor incididun</li> </ul> </div> <div class="bottom_querters_borders"> <div class="two_text_quarters"> <h2>II квартал 2019</h2> </div> <ul> <li> sed do eiusmod tempor incididun, <br> consectetur adipisicing elit, </li> </ul> </div> </div> </section> </div> </body> </html> 
max-widthand centermargin:auto. Well, bring your code, more likely to help. - zhurof