What is causing the extra space in Flexbox layout?

Currently, I am in the process of coding a layout that requires me to evenly distribute cards next to each other in rows using flex. However, I am encountering an issue with spacing on the right side and I cannot pinpoint the exact reason behind it. After inspecting the element, it appears that the entire card extends to the right without any clear explanation for this behavior. Upon reviewing the CSS code, no additional width is defined on the right side.

<section id="jobs">
    <!--Employing cards-->
    <div class="container-fluid container-fluid-shorter bg-white">

        <!--Assistant card-->

        <div class="row">
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h6 class="card-title font-weight-lighter pb-3">Custom units</h6>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 my-3">
                <div class="card width-37">
                    <div class="card-body d-flex align-items-center justify-content-between">
                        <h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
                        <p class="card-text">
                        <h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End of employing cards section-->
</section>

Here are the adjustments I've made to the CSS:

.width-37{
    max-width: 37.5vh;
}
.card-body{
    padding-left: 0!important;
    padding-right: 0!important;
}

I aim to arrange all items within the row with minimal spacing between them, forming rows as specified for different screen sizes (large, medium, small). It seems like the flex item is causing spacing on the right side of each individual item. The dimensions are 480 pixels wide and 180 pixels high, but I desire them to be uniform at 180 x 180 pixels. Can anyone provide insight into why this unexpected spacing is occurring?

htmlcssbootstrap-4

Answer №1

.width-37{
    maximum-width: 37.5vh;
}

The issue is with the alignment on the right side. Additionally, do not include a ; before using !important

Answer №2

This issue is not specific to Flexbox, but rather how block level elements are rendered. When a block level element does not fill the width of its container, the remaining space is filled with margin by default.

For Example

div {
  min-height: 24px;
}

div:nth-child( 1 ) {
  width: 100px;
  background-color: rebeccapurple;
}

div:nth-child( 2 ) {
  max-width: 200px;
  background-color: gold;
}

div:nth-child( 3 ) {
  width: 20vw;
  background-color: silver;
}
<div></div>
<div></div>
<div></div>

The default flow of content is left to right, explaining why elements align to the left within their container. The empty space to the right of each element is filled with margin, which may be why you are observing this behavior in your Bootstrap columns.

Answer №3

Here's the reason why: *Rows serve as containers for columns. Each column includes horizontal padding known as a gutter to control the space between them. The negative margins on the rows help offset this padding, ensuring that all content within the columns aligns visually along the left side. Check out the documentation here

If you want to eliminate the padding in your gutters, simply add the class no-gutters to your row.

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

Transitioning jQuery .load and the usage of sorttable.js for sorting data

My jQuery code snippet is as follows: $("#loadBtn").click(function(){ $('#div1').delay(200).slideUp('slow') .load ('page2.php #div2').hide().delay(300).slideDown('slow'); return false; ...

javascriptjqueryhtmlajaxsorttable.js

I am having trouble inserting a table from a JSON object into an HTML file

getJSON('http://localhost:63322/logs', function(err, data) { if (err !== null) { alert('Something went wrong: ' + err); } else { //var myObj = JSON.parse(data); // document.getElementById("demo").innerHTML = myObj.ad_soy ...

javascripthtmljson

Automatically create an accordion using information from an array

Successfully fetching data from MySQL based on a specific ID and storing it in an array named $history has been smooth sailing so far. The challenge now is to group this data into accordion card bodies based on their components. Array ( [serviceID] => ...

phparraysdynamicbootstrap-4accordion

Creating a jQuery variable in version 1.9.1 results in an error, whereas in version 1.8.3 it does not succeed

Recently updated to version 1.9.1 and encountered some technical difficulties. Despite that, everything works fine except for one thing: var $newthumbs = $(' <div id=\"car-7\" class=\"thumbnail_car thumbnail span2&bso ...

jqueryhtmljquery-1.8jquery-1.9

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

Why won't my navigation bar stay in place when I scroll down on the screen?

I'm trying to create a sticky navigation bar that becomes fixed when the user scrolls down to 200 pixels, but it's not working properly. I want it to behave like in this example: import React,{useState,useEffect} from 'react' functio ...

javascripthtmlreactjstailwind-css

Is it possible to create a dynamic rendering effect using HTML and CSS instead of

Looking for a library that can render HTML content dynamically in Flash or Flex? I need a simple function that can take a string containing HTML and CSS, and render it without using external files. The output should be real HTML rendered in Flash, not just ...

htmlapache-flexflashactionscript-3mxml

Spontaneous gradient background occasionally failing to load as expected

My to-do list is simple and functional, but I'm encountering an unusual issue with the background. The background is supposed to be a random gradient set using JS upon loading the HTML, but sometimes it doesn't apply at all. If you refresh the Co ...

javascripthtmlcss

What is the best way to integrate multiple Angular2 components on a single page?

I'm currently working on fitting a couple of components to each take up a full page. I would like the first component to occupy the entire screen, similar to a landing page, and have the browser scroll bar for scrolling down to view the second compone ...

csshtmlangularflexboxtwitter-bootstrap-4

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

What could be causing the discrepancy in the appearance of the Bootstrap cards between the computer and iPad screens?

Could someone please help me understand why the cards on my website appear differently on an iPad compared to a desktop? I have added <meta name="viewport" content="width=device-width"> to the beginning of the HTML document to set the width for the ...

htmlcssipadbootstrap-4

Is there a way to remove the option to switch to the desktop version on Joomla 2.5 mobile view?

Is there a way to set the desktop version as the default view on my website? Also, how can I remove the option for users to switch to the desktop version when accessing the site from a phone or tablet? ...

phphtmlcssresponsive-designjoomla2.5

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

htmlcss

Efficiently loading children components through lazy loading

My component was functioning perfectly until I added a heavy children component that caused the page to freeze. Now I am considering implementing lazy loading for the children component. Is this the correct solution? Additionally, I want to ensure that th ...

htmlangulartypescriptlazy-loading

Display additional fields based on a condition in ASP.NET Core 6.0 MVC for a Yes/No input

If a user enters either Yes or No in a specific field, I want to display additional fields that need to be filled based on their choice. <div class="col-6"> <label for="Renda Bruta">Demonstrativo do Ano</label> ...

c#htmlasp.net-corerazor-pages

How to position items at specific coordinates in a dropdown using JavaScript

I have five images in my code and I would like to arrange them in a circular pattern when they are dropped into the designated area. For example, instead of lining up the five images in a straight line, I want them to form a circle shape once dropped. Ho ...

javascripthtmlcss

Transform spaces into %20 from an HTML input field by utilizing JavaScript or jQuery

Hi there, I'm encountering an issue with the input field on my website where users can enter search terms. I am currently extracting the user's input value and adding it to a URL string. jQuery("#searchButton").click(function(){ var simpl ...

javascriptjqueryhtml

An error occurs in the console stating 'Maximum call stack size exceeded' when trying to add data to the database using JavaScript

I've been struggling with a JavaScript error for the past few days and despite scouring through numerous answers on StackOverFlow, none seem to address my specific issue. My goal is to simply submit a record to the database using a combination of Jav ...

javascripthtmljquery

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...

javascripthtmlangulartypescript