Obtaining an HTML horizontal scroll bar

When using bootstrap and the row class, I am encountering a 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>

Here is the output: image output please help

I had to remove the fourth row from the code due to limitations on stackoverflow

htmlcss

Answer №1

It may be difficult to debug the CSS issue without access to your entire style sheet, but I can provide you with a helpful method for troubleshooting.

To identify which elements are not aligning correctly and fix the floating issues, you can utilize the * selector along with the outline property.

* {
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>

Answer №2

It appears that the issue may be related to using margin-right instead of padding-right on the "row" class. The "row" class is intended to use 100% of the space allocated, and adding an additional 10px could be causing the scrollbar to appear.

Another possibility is that the row below may be larger than expected, leading to the scrollbar appearing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click on the "Read More" button to display a popup notification confirming the successful payment

I'm working on adding a "read more" button, but I want it to have some extra functionality. When clicked, I'd like it to trigger a pop-up message that says successful payment received, and then reveal the remainder of the paragraph. Below is the ...

javascripthtmljquerycss

What is the best way to incorporate spacing between elements in Selenium?

Utilizing Selenium, I attempted to extract data from a table on a webpage. The HTML structure is as follows: <table> <tbody> <tr> <td> <span>1</span> <span>0</span> ...

c#htmlselenium

Nodemon causing crashes in basic HTML pages

Having trouble getting a basic index.html page to work with nodemon. index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </hea ...

javascripthtmlnodemon

Adjust the background of the input range style prior to the thumb icon

Is there a way to style the bar before the thumb with a different color on a range input? I have been searching for a solution without much success. This is the desired look: https://i.sstatic.net/ZkTAB.png Unfortunately, Chrome no longer supports input[t ...

javascriptjqueryhtmlcssless

Problem with the transparency of CSS, div, and asp:Image

I am facing an issue with a div that has its opacity set to 60. Within this div, there is an asp:Image element. It seems like the opacity of the div is also affecting the image inside it. I attempted to create a separate class for the image and adjust th ...

asp.netcss

Change the position of an array element when displayed on an HTML page

I'm trying to figure out a way to manipulate the position of an HTML element that is stored inside an array. The issue I am facing is that my code generates a new div every time a specific function is called, and this div has a class applied to it for ...

javascripthtmlcss

Is your Joomla table experiencing resizing issues?

I am currently working with Joomla to build a basic website. I installed the Form Maker Lite survey extension by Joomla Extension Survey for creating surveys and questionnaires. After publishing the extension on my Joomla site, I encountered an issue tryi ...

htmlcssjoomlacss-tablesjoomla-extensions

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

htmlcssdrop-down-menu

Changing the stylesheet on a single-page application

Our angular-built single page app features a drag-and-drop interface for code snippets, each with its own unique styles separate from the main Bootstrap-themed admin panel. However, due to the differences in styling, navigating to the drag-and-drop sectio ...

javascriptcssangularjstwitter-bootstrapsingle-page-application

What is the best way to stick a div to the top of another div?

I'm attempting to have the white div appear on top of the grey div, rather than underneath it as shown in the screenshot. https://i.sstatic.net/UYYOt.png This layout is being built using Bootstrap 4. .form-login { text-align: center; back ...

htmlcssbootstrap-4

Tips on providing quotes in PHP for HTML attributes

echo "<tr onclick='window.location=("www.google.com")'> <td>something</td> <td>something</td> </tr>" I tried writing code like this, but it's not working. I'm struggling with where to ...

phphtml

Guide to positioning two <div>'s next to each other, not below each other, within the Blazor SyncFusion Card Component

I am currently utilizing the Card component in SyncFusion Blazor, which comes with properties for a title and subtitle. By default, these elements are displayed one below the other: https://i.sstatic.net/LFMr8.png Here is the CSS being employed: Title: ...

htmlcssblazortitlesyncfusion

Hiding labels in an HTML document can be achieved by using CSS

Recently, I've been working on a code that relies on a specific Javascript from Dynamic Drive. This particular script is a form dependency manager which functions by showing or hiding elements based on user selections from the forms displayed. Oddly ...

javascripthtml

What is the best way to make the sidebar occupy the entire space?

Learn about creating sticky footers using this method and check out an example here. * { margin:0; } html, body { height:100%; } #wrap { min-height:100%; height:auto !important; height:100%; margin:0 0 -47px; } #side { float:left; backgro ...

javascriptcss

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

javascriptcssreactjscss-transitions

The AJAX request to the URL is failing

Creating a webpage with the ability to control an IP camera's movements such as moving up and down or zooming in and out involves calling specific URLs. While trying to implement this feature asynchronously, I encountered issues using AJAX which did n ...

javascriptjqueryhtmlajaxcall

Achieve vertical alignment of a div alongside an image without utilizing tables or flexbox

As a beginner, I know this question has been asked numerous times, but I am struggling to find a straightforward answer that makes sense to me. I prefer not to use tables or flexbox, just plain CSS. What I Need: I have an image and I want to vertically c ...

css

Make sure to blur an editable p element using only vanilla JavaScript

Check out this code snippet: <p contenteditable>The most amazing p tag in the world of p tags</p> Here is the corresponding Javascript: var p = document.querySelector('p'); p.addEventListner('keypress', function (e) { ...

javascripthtmldom

The thumbnail image is failing to load, and when I hover over an image, it moves upwards

I seem to be encountering an issue with a website I uploaded for testing. Everything appears to be working correctly when checked locally in Dreamweaver CS6. However, once the site is uploaded, some issues arise. When hovering over the images, a problem is ...

javascripthtml

Utilizing Javascript for a seamless transition to collapse a div to a height of 0 pixels

Two radio buttons are in place, with one pre-selected upon loading the page. If 'yes' is checked, a div will have a height of 100%, while 'no' will set the height to 0px (making it invisible). Upon switching between the buttons, the div ...

javascripthtmlcss