html – What is causing this gap on the side of the screen? Bootstrap grid system-ThrowExceptions

Exception or error:

So basically I’m just messing around here using the bootstrap system and there seems to be a small gap on the right side of the screen. There are no box shadows or anything because I saw in one or two other posts that that was causing a similar issue with people.

html,
body,
.container {
  height: 100%;
  width:
}

.container {
  display: table;
  min-width: 100%;
  overflow: hidden;
  min-width: 100%;
  margin-top: -50px;
  padding: 50px 0 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

footer {
  background-color: #374754;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 1;
}

.row {
  height: 100%;
  width: 100%;
}

#library {
  background: blue;
}

#main {
  background: yellow;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-2 no-float" id="library"> library



      </div>

      <div class="col-sm-10 no-float" id="main"> main</div>
    </div>
  </div>

  <footer>footer</footer>

</body>

</html>

I’ve ripped it apart and I can’t seem to figure out what’s causing it. Any help is appreciated.

How to solve:

One of your CSS scripts adds margin-left: -15px to your row. That generally shifted the divs to the left.

And that same script adds padding-left: 15px; and padding-right: 15px;, so they don’t span completely from left to right.

###

Remove the 100% width setting for .row – that’s a bootstrap element which has its own, predefined CSS settings which you shouldn’t change (except for height, maybe). This include settings for left and right margins and padding which seem strange at first sight, but which are part of the bootstrap system.

Plus you had in invalid line in your first rule for html, body and .container (“width: …”), so that rule didn’t apply at all.

html,
body,
.container {
  height: 100%;
}

.container {
  display: table;
  min-width: 100%;
  overflow: hidden;
  min-width: 100%;
  margin-top: -50px;
  padding: 50px 0 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

footer {
  background-color: #374754;
  height: 75px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  z-index: 1;
}

.row {
  height: 100%;
}

#library {
  background: blue;
}

#main {
  background: yellow;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-2 no-float" id="library"> library



      </div>

      <div class="col-sm-10 no-float" id="main"> main</div>
    </div>
  </div>

  <footer>footer</footer>

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *