What is the best way to eliminate the outer gutter in a 3-column grid using Bootstrap 3?

Check out this fiddle for more information.

http://jsfiddle.net/Nb5C7/

I am curious about the blue gutter on the ends, which seems to be caused by auto margin. How can I get rid of it?

In another example provided here , I was able to remove the gutter using a fixed grid layout, but I would prefer not to do so.

The code snippet from the fiddle is as follows:

<div class="container">
    <div class="col-md-4" id="column1x">
        One
    </div>

    <div class="col-md-4" id="column2x">
        Two
    </div>

    <div class="col-md-4" id="column3x">
        Three
    </div>

Here is the accompanying CSS:

.container, .container-fixed { 
    background: #34c6f3;
}

#column1x, #column2x, #column3x {
    width : 32%;
    height: 620px;
    margin-right: 0px;
    background: #ed1e6c;
    border: 1px solid #222;
}   

#column1x, #column2x {
    margin-right: 2%;
}

Answer №1

To solve this issue, simply include the following CSS:

.container {
    padding: 0;
}

The unwanted padding is likely coming from the container element. In case the default styling persists, you can add !important to force the override, although it's not generally recommended.

For a live demonstration, visit DEMO HERE

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

The images are not clickable when trying to hyperlink them

I'm attempting to create a clickable image that will redirect users to another site when clicked. Here's the code I've tried: <div class="haus"> <a href="http://google.com"><img src="http://schwedenladen.de/wp-content/the ...

Node JS server fails to load CSS even with the use of express.static

It's quite absurd, but I've been grappling with a rather nonsensical code conundrum for days now. I just can't seem to get the CSS and image to load on my Node.js server. I've tried various solutions (like express.static, etc.), but n ...

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...

Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...

What CSS selector should I apply to create a circular profile image for Buddypress users?

In my current WordPress project, I am utilizing the BuddyPress, WooCommerce, and WC Vendors plugins for enhanced functionality. To personalize each vendor's product listings, I decided to display their BuddyPress profile picture alongside their produ ...

There seems to be an issue with the zebra striping in the rich:datatable component when using the rowClasses

I'm attempting to give my table a "zebra" color pattern for the rows, but it seems like the rowClasses attribute isn't functioning properly (edit: I don't see any colors applied to the table at all). Here is how I defined the styles: <s ...

Enhancing Your Website with WordPress Customizer API: Introducing Kirki's Repeater Image Feature

Allow me to clarify this situation as thoroughly as I can. To begin with, I am utilizing a toolkit known as Kirki to enhance the WordPress Customizer API Within my theme, there is a section that features a 4-column layout of services, each accompanied by ...

What specific @media query should be used to target Windows Phone 8+ with high resolution?

As per the insights shared in Brett Jankord's article on Cross Browser Retina/High Resolution Media Queries The information suggests that Windows 8 phones do not adhere to device-pixel-ratio media queries. Are there alternative methods to target W ...

Prevent scrolling within input field

I have a text entry field with background images that separate each letter into its own box. Unfortunately, an issue arises when I reach the end of the input: the view automatically scrolls down because the cursor is positioned after the last letter enter ...

Footer displaying page numbering

I recently installed dompdf 0.83 and have been able to generate documents successfully. However, I am struggling to create a footer that displays the page number out of the total number of pages. Both css and script methods have not been effective for me s ...

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

Enhance React scrollbar functionality without relying on third-party dependencies

Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...

Understanding how flex-wrap property works in flexbox is essential for creating

Take a look at the code snippet below: .flex-container { padding: 20px; margin: 20px; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz- ...

Populate modal form with database information without using Bootstrap

As I work on populating a form with data from an sqlite database, I've come across a stumbling block. My code is available for reference on JSFiddle: https://jsfiddle.net/daikini/e71mvg7n/ One important note: Bootstrap isn't being utilized in t ...

Tell me about the CSS ruby-align characteristic

While browsing online, I stumbled upon a reference to the ruby-align property that piqued my interest. After searching on w3schools for some examples, I was surprised to find no mention of it anywhere. I remembered that Ruby is a newer tag in HTML5 and de ...

Safari now fully embraces Flexbox technology

My flexbox code works well in Chrome and Firefox, but unfortunately it's not performing well in Safari. Despite trying various prefixes, I couldn't achieve the same simple order. How can I modify or add to my code so that it functions normally in ...

"Exploring the world of Reactstrap: A

I am struggling to understand the documentation for Bootstrap and reactstrap as I have never used them before. For example, changing the Navbar color and background opacity has been a challenge because they require reserved keywords to be passed as props, ...

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

Adjust CKEditor's height within Vue.js

I recently began experimenting with integrating ckeditor5 into a Vue.js project. However, I encountered an issue where I couldn't manually adjust its height. Below is the code snippet I used - could you please review it and let me know if there are an ...