Ways to eliminate excess white space or margins on the right-hand side of a webpage

After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled as to why it occurs.

https://i.sstatic.net/taTiL.jpg

Below is the HTML code I used:

.h-400 {
  height: 400px;
}

img.image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid p-0 mt-2">
  <div class="row ">
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
    </div>
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
    <div class="row ">
      <div class="col-md-6 col-12 p-0 h-400">
        <img class="img-fluid image" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>
      <div class="col-md-6 col-12 p-0 h-400">
        <img class="img-fluid image" src="https://images.pexels.com/photos/2187306/pexels-photo-2187306.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>

      <!-- 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d1ced1d1c4d38fcbd2e1908f90978f91">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

htmlcssbootstrap-4

Answer №1

      <div class="container mx-0">
        <div class="col-lg-6 col-12 p-0 h-500">
          <img class="img-fluid picture" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
        </div>
        <div class="col-lg-6 col-12 p-0 h-500">
          <img class="img-fluid picture" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
        </div>
        <div class="container mx-0">
          <div class="col-lg-6 col-12 p-0 h-500">
            <img class="img-fluid picture" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
          </div>
          <div class="col-lg-6 col-12 p-0 h-500">
            <img class="img-fluid picture" src="https://images.pexels.com/photos/2187306/pexels-photo-2187306.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
          </div>
        </div>
      </div>

Answer №2

Simply place everything inside a row div:

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid p-0 mt-2">
  <div class="row ">
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
    </div>
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
  
      <div class="col-md-6 col-12 p-0 h-400">
        <img class="img-fluid image" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>
      <div class="col-md-6 col-12 p-0 h-400">
        <img class="img-fluid image" src="https://images.pexels.com/photos/2187306/pexels-photo-2187306.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
    </div>

      <!-- 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1819e81819483df9b82b1c0dfc0c7dfc1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 </div>
</nav>

Answer №3

There are two instances of the row class without closing tags present.

.h-400 {
  height: 400px;
}

img.image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid p-0 mt-2">
  <div class="row">
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
    </div>
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187966/pexels-photo-2187966.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
    <div class="col-md-6 col-12 p-0 h-400">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187306/pexels-photo-2187306.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </div>
  </div>


  <!-- 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb9b849b9b8e99c58198abdac5daddc5db">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

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

Tips for adjusting the width of table columns when dealing with browser fields

When working with a table field, I am allowing input as a file. <table> <tr> <th> <input type="file" name="icon" id="icon" /> </th> </tr> </table> The file input field is recommended to have a width of 242-246px ...

htmlcss

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

javascripthtmlhyperlink

Once the Json content is loaded into the array, proceed to append

I am facing an issue with my ajax function that loads thumbnails. The function is being called by another ajax function, and the parameter is retrieved from there in the loop. I have attempted to wait for the ajax call to finish using .done and .ajaxCompl ...

jqueryhtmljson

ways to utilize inline styling in react using javascript

When repurposing an array of React components, I am looking to modify the inline styles generated with them. How can I access and log the inline styles of a React component? UPDATE: see the code snippet below: const pieces = this.props.pieces.map((decl, ...

javascripthtmlcssreactjs

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

Superfish Dropdown Menu in Internet Explorer

Hey everyone, I'm having some trouble with drop-down menus on my website. They are working perfectly except for in IE. I've been trying to troubleshoot for the last couple of hours, but I just can't seem to figure out what the issue is. I& ...

jquerycssinternet-explorersuperfish

HTML 4.01 character and character offset attributes

I'm curious about the purpose of the charoff attribute in HTML 4.01 Transitional. Specifically, consider a table column that contains the following cells: <td>1.30</td> <td>10</td> <td>100.2</td> <td>1000 ...

htmlchar

Establishing a Connection with Node/Express Routing via JavaScript

When developing a web application using HTML, JavaScript, and Node.js with Express, I often find the need to navigate between pages based on user actions. In HTML, one approach is to add an href link and then set up routes in my app.js file to handle the ...

javascriptjqueryhtmlnode.jsexpress

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

javascripthtmlcssbootstrap-4

Organize column 1 on top of column 2 for mobile display

Currently, I am utilizing the grid system with 2 columns set up as follows: <div class="row"> <div class="col-md-6"> 1 </div> <div class="col-md-6"> 2 </div> </div> ...

htmlbootstrap-4bootstrap-5

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

htmlcsscss-selectorsbackground-image

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

My goal is to toggle between two CSS classes on a selector click using Jquery UI .toggleClass(), but unfortunately, it's not producing the desired toggle effect. $(".toggle").click(function () { $(".archivePosts .columns").removeClass( "l ...

javascriptjqueryhtmlcssjquery-ui

"Developing a creative portfolio item using Bootstrap and ASP.NET's data access

Trying to implement Bootstrap portfolio-item in a datalist: <div class="row"> <asp:Panel ID="Pnl_prodL" runat="server" Width="100%"> <asp:DataList ID="dlst_prodNP" runat="server" OnItemDataBound="dlst_prodNP_ItemDataBound" Repe ...

asp.netbootstrap-4datalistportfolio

Navigating pinch to zoom: Strategies for managing varying page locations

I've been using a combination of JS and CSS to position images within the viewport in a way that allows them to scale and translate accurately to fill the space. For the most part, this method works smoothly and is also able to handle browser zoom fu ...

javascripthtmlcss

Align a component vertically in a FlexBox using Material UI

I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular pr ...

cssreactjsflexboxmaterial-ui

The list in my "Hamburger" menu isn't loading properly

I have been attempting to add a "Hamburger" style menu to my webpage specifically for the "md" size. Although the hamburger menu displays, clicking on it does not trigger any action. I experimented with removing some classes from certain tags, but most of ...

jqueryhtmlrazorbootstrap-4

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

javascripthtmlcss

Challenges encountered with relative links in the layout of a static website generator resembling padrino, sinatra, or rails, involving HTML, CSS, and haml

I'm currently utilizing a static site generator to create a website that resides on a shared network folder within my workplace. This site serves as a simple tutorial platform for my colleagues; it's not hosted on a server and remains completely ...

htmlmiddlemanstatic-siterelative-url

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

javascripthtmlangular