CODEWITHSUNDEEP
htmlcss
Aniket Thorat
Aniket Thorat

Reputation: 127

Getting Horizontal scrollbar HTML

I am using bootstrap but while using row class I am getting horizontal scroll bar

 <div class="row" style="margin-top: 10px; margin-right: 10px;">
    <div class="card col-md-3" style="max-height:fit-content; background-color: khaki;" >
      <div class="d-flex justify-content-center mg">
      <img   src="https://image.flaticon.com/icons/png/512/897/897219.png"  style="max-width:50%;" alt="Card image cap">
    </div>
    <div class="d-flex justify-content-center">
       <h5 class="card-title">Artificial intelligence</h5>
    </div>
    </div>
    <div class="card col-md-3" style="max-height:fit-content; background-color: cornflowerblue;" >
      <div class="d-flex justify-content-center mg" >
      <img   src="https://image.flaticon.com/icons/png/512/888/888991.png"  style="max-width:50%;" alt="Card image cap">
    </div>
    <div class="d-flex justify-content-center">
       <h5 class="card-title">Web development</h5>
    </div>
    </div>
    <div class="card col-md-3" style="max-height:fit-content; background-color: darkcyan;" >
      <div class="d-flex justify-content-center mg" >
      <img   src="https://image.flaticon.com/icons/png/512/2641/2641044.png"  style="max-width:50%;" alt="Card image cap">
    </div>
    <div class="d-flex justify-content-center">
       <h5 class="card-title">Image processinge</h5>
    </div>
    </div>
  </div>

Output image output please help

I have deleted fourth row from code due code code limitation on stackoverflow

Upvotes: 0

Views: 41

Answers (2)

Arno Tenkink
Arno Tenkink

Reputation: 1528

Because you didn't give us your whole CSS style sheet this is hard to debug, so I give you a method to debug this yourself.

You can use the * and outline to see which items are out of line and correct them to float properly.

* {
outline: 1px solid purple;
}

* > * {
outline: 1px solid blue;
}

* > * > * {
outline: 1px solid red;
}

/* example CSS not part of the answer */

div, span {
padding: 20px;
margin: 4px;
}

h1 {
  padding: 10px;
  margin-bottom: 12px;
}
<div>
  <h1>Testing page</h1>
  <div>
    <div>Wooow</div>
    <span>This</span><span>is</span><span>Doge</span>
    <div>
      <div>
       New level
      </div>
    </div>
  </div>
</div>

Upvotes: 1

KitsuPixel
KitsuPixel

Reputation: 21

My best guess is that you are using on the "row" class the margin-right where you should be using the padding-right. The "row" class uses 100% of the space it's put on, and you are using 100% + 10px, hence the scrollbar.

One other guess is the row below that seem bigger, it could be reason for scrollbar.

Upvotes: 1

Related Questions