I make up a template using bootstrap. Faced such a problem: there is a row, in it ul and 3 li, each of which is assigned a class col-lg-4. The row and ul widths are 1060px for a given screen width, and the columns are less than a third of that width. He can understand what the problem is, because there are no peddings and margins. enter image description here In the picture above these li is a gray border equal in width to ul and row. Please tell me what could be the problem.

body { font-family: "RobotoRegular", sans-serif; font-size: 14px; } h1 { font-size: 60px; } h2 { font-size: 50px; } h3 { font-size: 40px; } h4 { font-size: 24px; } h5 { font-size: 20px; } .container-fluid { padding: 0; } .row { margin-left: 10px; margin-right: 10px; } header { background-color: #333333; height: 135px; } header .row { height: 135px; } header h1 { color: #eeeeee; position: relative; vertical-align: middle; display: inline; } .studio { margin-top: 60px; padding-left: 0px; } .navigation { margin-top: 85px; } .navbar { margin-bottom: 0px; } .navbar-collapse { padding-right: 0px; } .navbar-inverse { background-color: transparent; border-color: transparent; } .navbar-inverse .navbar-nav li { color: #eeeeee; } .navbar-nav li a { position: relative; padding-bottom: 0px; vertical-align: bottom; } .navbar-inverse .navbar-nav li a:hover { color: #00aeef; } .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .service { text-align: center; } .service h3 { color: #ffffff; padding-bottom: 20px; border-bottom: 2px solid #f4fafe; margin-left: 5%; margin-right: 5%; margin-bottom: 20px; } .panel-body > p { margin-left: 3%; margin-right: 3%; } content ul li { list-style-type: none; display: block; margin: 0 auto; } .panel { /*max-width: 285px;*/ width:100%; background-color: #00aeef; border-radius: 0px; border: none; box-shadow: 3px 3px 10px #c7c7c7; display: block; margin: 0 auto; margin-bottom: 15px; } .btn { border-radius: 0px; } .btn-primary:active { background-color: #286090; border-color: #204d74; } .btn-primary:hover { background-color: #286090; border-color: #204d74; } button { text-decoration: none; color: #ffffff; text-transform: uppercase; box-shadow: inset 0px 0px 5px 1px #165f7a; } content h2 { color: #333333; } content h2 span { color: #00bff3; } content h3 { color: #bbbbbb; } content h4 { color: #555555; } .about { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .services { padding-bottom: 25px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } /*MEDIA*/ /* LG devices, Wide Screens */ @media only screen and (min-device-width : 1200px) { .row { margin-left: 70px; margin-right: 70px; } } /* MD devices, Wide Screens */ @media only screen and (min-device-width : 992px) and (max-device-width : 1199px) { .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } #bs-example-navbar-collapse-2 { display: inline-block; max-width: 450px; } .navbar .navbar-inverse { display: inline-block; max-width: 450px; } .studio { padding-right: 0px; } .navigation { padding-left: 0px; padding-right: 0px; } li a { padding-right: 0px; } .collapse { margin-right: 0px; } } /* SM Devices, Desktops */ @media only screen and (min-device-width : 768px) and (max-device-width : 991px) { h1 { font-size: 60px; } .studio { margin-top: 0px; } .navigation { margin-top: 43px } .row { margin-left: 20px; margin-right: 20px; } .panel-body { padding-left: 5px; padding-right: 5px; } .col-sm-4 { padding-left: 5px; padding-right: 5px; } content li .col-sm-6 { margin: auto; } } /* XS devices */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { .studio { margin-top: 0px; } .navigation { margin-top: 75px; } .navbar-toggle { background-color: #333; margin-right: 30px; } .navbar-inverse .navbar-nav li { text-align: right; } .navbar-inverse .navbar-toggle { border-color: #fff; } } 
 <div class="container-fluid"> <header> <div class="row"> <div class="studio col-lg-6 col-md-6 col-sm-4 col-xs-6"> <h1>Design Studios</h1> </div> <!-- <div class="container-fluid"> --> <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6"> <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- </div> --> </nav> </div> </header> <content> <div class="row maindescription"> <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2> <h3>Providing High Quality Web Solutions</h3> </div> <div class="row about"> <h4>We provide <strong>first class</strong> web solutions for organizations and small businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4> </div> <div class="row services"> <ul> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 "> <div class="panel panel-default"> <div class="panel-body"> <h3>web design</h3> <p>We provide web design solutions of the very highest order. We'll work with you from the start to understand your exact requirements and will continuosly work with you to ensure that you're happy with the final site that you purchase.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> get more details>> </button> </div> </div> </li> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>marketing</h3> <p>We can help you promote your business in both the online and offline worlds. We specialize in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> view case studies>> </button> </div> </div> </li> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>optimization</h3> <p>Want to drive more traffic to your site? You've come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> learn more>> </button> </div> </div> </li> </ul> </div> </div> <div class="row additional"> <div class="testimonials col-lg-6"> </div> <div class="projects col-lg-6"> </div> </div> </content> <footer> </footer> </div>

  • In the browser inspector, see where these indents come from. Ctrl + Shift + I - Andrey Fedorov
  • @AndreyFedorov If I am not mistaken, then I have just opened the inspector in the screenshot. The problem is that I cannot understand where these indents came from, since there are no pedings or margins there, which I showed on the screen. - Alexander Sigida
  • In the standard configuration Bootstrap 3, each class a la col-*-* has padding-right: 15px; and padding-left: 15px; - lexxl
  • @lexxl Yes, I know, I have already removed them, but it still does the same. - Alexander Sigida
  • @AlexanderSigida I already told you where the "indents" came from) - user192664

1 answer 1

  1. Your code does not touch the <ul> padding.
  2. Classes from the bootstrap columns add 15px paddings to <li >. This padding can be interrupted, for example, with the help of !important for content ul li .

That's how the columns completely stick together:

 content ul { padding: 0; } content ul li { padding: 0 !important; } 

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); content ul { padding: 0; } content ul li { padding: 0 !important; } body { font-family: "RobotoRegular", sans-serif; font-size: 14px; } h1 { font-size: 60px; } h2 { font-size: 50px; } h3 { font-size: 40px; } h4 { font-size: 24px; } h5 { font-size: 20px; } .container-fluid { padding: 0; } .row { margin-left: 10px; margin-right: 10px; } header { background-color: #333333; height: 135px; } header .row { height: 135px; } header h1 { color: #eeeeee; position: relative; vertical-align: middle; display: inline; } .studio { margin-top: 60px; padding-left: 0px; } .navigation { margin-top: 85px; } .navbar { margin-bottom: 0px; } .navbar-collapse { padding-right: 0px; } .navbar-inverse { background-color: transparent; border-color: transparent; } .navbar-inverse .navbar-nav li { color: #eeeeee; } .navbar-nav li a { position: relative; padding-bottom: 0px; vertical-align: bottom; } .navbar-inverse .navbar-nav li a:hover { color: #00aeef; } .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .service { text-align: center; } .service h3 { color: #ffffff; padding-bottom: 20px; border-bottom: 2px solid #f4fafe; margin-left: 5%; margin-right: 5%; margin-bottom: 20px; } .panel-body > p { margin-left: 3%; margin-right: 3%; } content ul li { list-style-type: none; display: block; margin: 0 auto; } .panel { /*max-width: 285px;*/ width:100%; background-color: #00aeef; border-radius: 0px; border: none; box-shadow: 3px 3px 10px #c7c7c7; display: block; margin: 0 auto; margin-bottom: 15px; } .btn { border-radius: 0px; } .btn-primary:active { background-color: #286090; border-color: #204d74; } .btn-primary:hover { background-color: #286090; border-color: #204d74; } button { text-decoration: none; color: #ffffff; text-transform: uppercase; box-shadow: inset 0px 0px 5px 1px #165f7a; } content h2 { color: #333333; } content h2 span { color: #00bff3; } content h3 { color: #bbbbbb; } content h4 { color: #555555; } .about { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .services { padding-bottom: 25px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } /*MEDIA*/ /* LG devices, Wide Screens */ @media only screen and (min-device-width : 1200px) { .row { margin-left: 70px; margin-right: 70px; } } /* MD devices, Wide Screens */ @media only screen and (min-device-width : 992px) and (max-device-width : 1199px) { .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } #bs-example-navbar-collapse-2 { display: inline-block; max-width: 450px; } .navbar .navbar-inverse { display: inline-block; max-width: 450px; } .studio { padding-right: 0px; } .navigation { padding-left: 0px; padding-right: 0px; } li a { padding-right: 0px; } .collapse { margin-right: 0px; } } /* SM Devices, Desktops */ @media only screen and (min-device-width : 768px) and (max-device-width : 991px) { h1 { font-size: 60px; } .studio { margin-top: 0px; } .navigation { margin-top: 43px } .row { margin-left: 20px; margin-right: 20px; } .panel-body { padding-left: 5px; padding-right: 5px; } .col-sm-4 { padding-left: 5px; padding-right: 5px; } content li .col-sm-6 { margin: auto; } } /* XS devices */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { .studio { margin-top: 0px; } .navigation { margin-top: 75px; } .navbar-toggle { background-color: #333; margin-right: 30px; } .navbar-inverse .navbar-nav li { text-align: right; } .navbar-inverse .navbar-toggle { border-color: #fff; } } 
 <div class="container-fluid"> <header> <div class="row"> <div class="studio col-lg-6 col-md-6 col-sm-4 col-xs-6"> <h1>Design Studios</h1> </div> <!-- <div class="container-fluid"> --> <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6"> <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- </div> --> </nav> </div> </header> <content> <div class="row maindescription"> <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2> <h3>Providing High Quality Web Solutions</h3> </div> <div class="row about"> <h4>We provide <strong>first class</strong> web solutions for organizations and small businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4> </div> <div class="row services"> <ul> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 "> <div class="panel panel-default"> <div class="panel-body"> <h3>web design</h3> <p>We provide web design solutions of the very highest order. We'll work with you from the start to understand your exact requirements and will continuosly work with you to ensure that you're happy with the final site that you purchase.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> get more details>> </button> </div> </div> </li> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>marketing</h3> <p>We can help you promote your business in both the online and offline worlds. We specialize in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> view case studies>> </button> </div> </div> </li> <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>optimization</h3> <p>Want to drive more traffic to your site? You've come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> learn more>> </button> </div> </div> </li> </ul> </div> </div> <div class="row additional"> <div class="testimonials col-lg-6"> </div> <div class="projects col-lg-6"> </div> </div> </content> <footer> </footer> </div>

But I do not understand why the list was needed. Columns can be stacked in the usual blocks, without <ul> and <li> . Here is an option with a gap between the speakers:

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); content ul { padding: 0; } content ul li { padding: 0 !important; } body { font-family: "RobotoRegular", sans-serif; font-size: 14px; } h1 { font-size: 60px; } h2 { font-size: 50px; } h3 { font-size: 40px; } h4 { font-size: 24px; } h5 { font-size: 20px; } .container-fluid { padding: 0; } .row { margin-left: 10px; margin-right: 10px; } header { background-color: #333333; height: 135px; } header .row { height: 135px; } header h1 { color: #eeeeee; position: relative; vertical-align: middle; display: inline; } .studio { margin-top: 60px; padding-left: 0px; } .navigation { margin-top: 85px; } .navbar { margin-bottom: 0px; } .navbar-collapse { padding-right: 0px; } .navbar-inverse { background-color: transparent; border-color: transparent; } .navbar-inverse .navbar-nav li { color: #eeeeee; } .navbar-nav li a { position: relative; padding-bottom: 0px; vertical-align: bottom; } .navbar-inverse .navbar-nav li a:hover { color: #00aeef; } .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .service { text-align: center; } .service h3 { color: #ffffff; padding-bottom: 20px; border-bottom: 2px solid #f4fafe; margin-left: 5%; margin-right: 5%; margin-bottom: 20px; } .panel-body > p { margin-left: 3%; margin-right: 3%; } content ul li { list-style-type: none; display: block; margin: 0 auto; } .panel { /*max-width: 285px;*/ width:100%; background-color: #00aeef; border-radius: 0px; border: none; box-shadow: 3px 3px 10px #c7c7c7; display: block; margin: 0 auto; margin-bottom: 15px; } .btn { border-radius: 0px; } .btn-primary:active { background-color: #286090; border-color: #204d74; } .btn-primary:hover { background-color: #286090; border-color: #204d74; } button { text-decoration: none; color: #ffffff; text-transform: uppercase; box-shadow: inset 0px 0px 5px 1px #165f7a; } content h2 { color: #333333; } content h2 span { color: #00bff3; } content h3 { color: #bbbbbb; } content h4 { color: #555555; } .about { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } .services { padding-bottom: 25px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } /*MEDIA*/ /* LG devices, Wide Screens */ @media only screen and (min-device-width : 1200px) { .row { margin-left: 70px; margin-right: 70px; } } /* MD devices, Wide Screens */ @media only screen and (min-device-width : 992px) and (max-device-width : 1199px) { .maindescription { padding-bottom: 40px; border-bottom: 2px solid #bbbbbb; margin-bottom: 40px; } #bs-example-navbar-collapse-2 { display: inline-block; max-width: 450px; } .navbar .navbar-inverse { display: inline-block; max-width: 450px; } .studio { padding-right: 0px; } .navigation { padding-left: 0px; padding-right: 0px; } li a { padding-right: 0px; } .collapse { margin-right: 0px; } } /* SM Devices, Desktops */ @media only screen and (min-device-width : 768px) and (max-device-width : 991px) { h1 { font-size: 60px; } .studio { margin-top: 0px; } .navigation { margin-top: 43px } .row { margin-left: 20px; margin-right: 20px; } .panel-body { padding-left: 5px; padding-right: 5px; } .col-sm-4 { padding-left: 5px; padding-right: 5px; } content li .col-sm-6 { margin: auto; } } /* XS devices */ @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { .studio { margin-top: 0px; } .navigation { margin-top: 75px; } .navbar-toggle { background-color: #333; margin-right: 30px; } .navbar-inverse .navbar-nav li { text-align: right; } .navbar-inverse .navbar-toggle { border-color: #fff; } } 
 <div class="container-fluid"> <header> <div class="row"> <div class="studio col-lg-6 col-md-6 col-sm-4 col-xs-6"> <h1>Design Studios</h1> </div> <!-- <div class="container-fluid"> --> <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6"> <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- </div> --> </nav> </div> </header> <content> <div class="row maindescription"> <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2> <h3>Providing High Quality Web Solutions</h3> </div> <div class="row about"> <h4>We provide <strong>first class</strong> web solutions for organizations and small businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4> </div> <div class="row services"> <div class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 "> <div class="panel panel-default"> <div class="panel-body"> <h3>web design</h3> <p>We provide web design solutions of the very highest order. We'll work with you from the start to understand your exact requirements and will continuosly work with you to ensure that you're happy with the final site that you purchase.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> get more details>> </button> </div> </div> </div> <div class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>marketing</h3> <p>We can help you promote your business in both the ondivne and offdivne worlds. We speciadivze in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> view case studies>> </button> </div> </div> </div> <div class="service col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <h3>optimization</h3> <p>Want to drive more traffic to your site? You've come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p> <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> learn more>> </button> </div> </div> </div> </div> </div> <div class="row additional"> <div class="testimonials col-lg-6"> </div> <div class="projects col-lg-6"> </div> </div> </content> <footer> </footer> </div>