How to Remove This Horizontal Scrollbar in Bootstrap 3

How to remove this horizontal scrollbar in Bootstrap 3

As per Bootstrap 3 documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Therefore, add the class container to your .wrapper element.

Updated Example

<div class="wrapper container">
    <div class="row">
        ...
    </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

The .container class effectively displaces that with the following:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".

How to remove horizontal scroll in bootstrap?

You can't insert a container INSIDE a container without changing its width. The container itself has min-width. Reference: http://getbootstrap.com/css/#grid-options

If you badly want to use a container, then use container-fluid.

Reference: http://getbootstrap.com/css/#grid-example-fluid

This is the edited html codes. Hope it helps.

http://www.bootply.com/IsEptxFAGG

How to remove horizontal scrollbar when using no padding

Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.

In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:

How the Bootstrap 4 Grid Works
How Box model works

Bootstrap 3.3.7 row causing horizontal scroll bar

First of all you don't need row or col-*12 classes if your section is 100% wide look at this bootstrap example they have not taken any row or col-*12 neither with header nor jumbotron. If your section has column Just take row inside col-* classes for example

<div class="col-sm-6">
    <div class="row">stuff</div>
</div>
<div class="col-sm-6">
    <div class="row">stuff</div>
</div>

Fiddle

Or in case if you are using container-fluid

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
        <div class="col-sm-6">
            <div class="row">stuff</div>
        </div>
    </div>
</div>

Fiddle

Delete horizontal scrollbar

The horizontal scrollbar appears because your content is too wide for screen. Check with the width's of your elements.
A quicker solution is to just limit your body's width and scrollbar would be gone.

body { width: 98% } works alright in your case. You can also use body { overflow-x : hidden} and just hide the scrollbar if you're sure you don't have content that needs to be accessed by scrolling horizontally.

How to remove a horizontal scrollbar appearing while using twitter bootstrap on mobile menu

.navbar-nav is using negative margins which is causing the content to flow outside of the container. Which is the ultimate reason of the scroll bar. Changing that to a positive padding should fix it =)

.navbar-nav {
    margin: 0;
    padding: 7.5px 15px;
}

JSfiddle to the padding / margin change.

Bootstrap table prevent from creating horizontal scrollbar

Adding float:left, word-break: break-word; along with width: 50% to .table td, .table th will give the result.

.container {
    position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

table {
    border-top: hidden;
}

.table td,
.table th {
  width: 50%;
  float: left;
  word-break: break-word;
  padding-left: 10px;
}

td,
th[scope=row] {
    color: #808080;
}

.odd-section {
  width: 100%;
  background: #fff;
  padding: 3em 0em;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
  </head>
  <body>

    <!-- TABLE -->
    <div class="odd-section">
      <div class="container">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th class="" scope="col">Lorem Lorem</th>
              <th scope="col">Result</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
            </tr>
            <tr>
              <th scope="row">Lorem Ipsum is </th>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.This will also work on secret lots.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  </body>
</html>

How to Remove This Horizontal Scrollbar in Bootstrap 3