Bootstrap - row in row that goes beyond it a bit

Question

body {
  font-family: 'Ubuntu', sans-serif;
  background: #0d0d0d;
}

body a {
  color: #fff;
}

body a:hover {
  color: #fff;
}

@media (min-width: 1500px) {
  .container {
    width: 1470px !important;
  }
}

nav {
  background: #1c1c1c !important;
  margin-bottom: 50px;
}

.toper {
  padding: 100px;
  background: #071931;
  color: #fff;
}

.main {
  background: #121212;
  border-radius: 2px;
  margin-top: -60px;
  color: #fff;
  padding: 15px 15px;
}

.container-first {
  background: #2a2a2a;
  margin: 0px 0px 15px 0px;
  padding: 5px;
}

.breadcrumb {
  margin: 0px;
  background: #2a2a2a;
}

.container-first-right {
  padding-top: 2px;
}

@media screen and (max-width: 768px) {
  .container-first-right {
    float: none !important;
  }
}

.welcome {
  background: #444;
  border-radius: 3px;
  padding: 0px !important;
  margin-bottom: 15px;
}

.welcome-header {
  padding: 15px 20px 15px 20px;
  background: #2d2d2d;
  border-radius: 3px;
  margin: 10px;
  box-shadow: inset 0px 0px 15px 0px #000;
}

.welcome-text {
  padding: 10px;
  margin: 10px;
  color: #ccc;
}

.welcome-action {
  padding: 15px 0px 15px 20px;
  background: #4d4d4d;
  color: #ccc;
  letter-spacing: 5px;
  border-radius: 3px;
}

.bluer {
  padding: 15px;
  background: #046092;
  border-radius: 3px;
  font-weight: 500;
}

.section-bluer {
  padding: 0px;
  margin-top: 15px;
}

.section-first {
  background: #1c1c1c;
}

.section-picture {
  vertical-align: middle;
  padding: 5px;
}

.section-picture>img {
  border: 1px solid #016d9b;
}

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>

<body>
  <main class="container main">
    <div class="container-fluid bluer">
      <a href="#">Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!</a>
    </div>
    <div clas="container-fluid row">
      <div class="col-sm-8 section-bluer">
        <div class="bluer">
          Projekty Firaszka
        </div>
        <div class="row section-first">
          <div class="col-sm-1 section-picture">
            <img src="fb.png" />
          </div>
          <div class="col-sm-8 section-this">
            asdasdas
          </div>
          <div class="col-sm-3 section-last-post">
            asdasd
          </div>
        </div>
      </div>
      <div class="col-sm-4">
      </div>
    </div>
  </main>
</body>

</html>

As you can see

This is the problem.

Row in row and row section-first" goes a little bit beyong previous row

Tried many things but completly no Idea how to fix it.

It's problem with the width of this rows that doesn't fit previous row.

Roland Ruul · Accepted Answer · 2017-07-13T13:18:30.797

1

Bootstrap class .row has margin-left & margin-right of -15px.

You need to compensate this by removing margin-left & margin-right. Like this:

.section-first {
    margin: 0;
}

or

.section-first {
    margin-left: 0;
    margin-right: 0;
}

edited Jul 13 '17 at 13:18

answered Jul 13 '17 at 13:13

Roland Ruul

1,172
8
15

Thank you. Totally missed this margin, chrome didn't show me this one mehh – Krystian Polska Jul 13 '17 at 13:15

score 1 · Answer 2 · answered Jul 13 '17 at 13:43

Plz correct your bootstrap html structure like :

container > row > col--

or

container-fluid > row-fluid > col--

you put "row" with "container" its not correct format you must create like given structure :-

<div class="container">
   <div class="row">
     <div class="col-md-5"></div>       
   </div>  
</div>

your html code is here enter link description here

score 0 · Answer 3 · edited Jul 13 '17 at 21:30

0

Set .section-first margin to 0......simple :)

.section-first {
    margin: 0;
}

edited Jul 13 '17 at 21:30

Michael0x2a

58,192
30
175
224

answered Jul 13 '17 at 13:35

Lokesh thakur

219
2
11

Bootstrap - row in row that goes beyond it a bit

3 Answers3