Fixing horizontal overflow with Bootstrap 4 row

Can anyone help me figure out why there is a white space appearing on the right side of my page when I create a row? I've tried various solutions without any success. Here is the CSS code I am using:

.special-header {
  margin-top: 50px;
}

.special-h1 {
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  color: #6BC8F2;
  line-height: 49px;
}

.special-row {
  margin-top: 120px;
}

.special-h2 {
  text-align: center;
}

.special-block {
  border: 2px solid #6BC8F2;
  margin-left: 160px;
  margin-right: 160px;
  border-radius: 5px;
  padding: 30px;
}

.special-icon {
  float: right;
}

.special-i {
  font-size: 39px;
  color: #6BC8F2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<article class="special-header">
  <div class="text-center container">
    <h1 class="special-h1">Our Specialties</h1>
  </div>
  <div class="special-row row d-flex justify-content-center">
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Customization</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Customization</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Customization</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
  </div>
</article>

https://i.sstatic.net/aMtGl.png Here is the HTML and CSS code I'm using along with an image of how it currently appears on the website!

htmlcssbootstrap-4

Answer №1

Start by enclosing your initial row in a div element with either the container or container-fluid class applied

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

Perform an AJAX request to an encrypted URL with an unverified certificate

I'm experiencing an issue with my site that makes AJAX JSONP calls to a secured (SSL) web server. Everything works smoothly when using an unsecured (HTTP) web server, but once I switch to the SSL version, the call never returns. After checking with Fi ...

javascriptjqueryhtmlsslhttps

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

Position images to the left, stacked on top of each other, with text centered on the right side of the picture

I have 5 images that I want to stack on the left side, with text displayed beside each image to the right and centered vertically. I've managed to stack the images, but the text is appearing below them instead of beside. Yes, I'm trying to creat ...

htmlcss

Tips for placing an element in the top left corner and turning it into a functional "back to top" button

I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site: <body> <a name="top"></a> <a href="#top" id="to ...

jqueryhtmlcss

Display the field names from a MySQL table on a web page

Is there a way to show all column names from a MySQL table on a webpage if only the table name is known? ...

phphtmlmysqlcss

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

c#htmljsonvue.jsaxios

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Methods for verifying if a file is included in another file, while disregarding any whitespace adjustments

Let's say I have multiple CSS files (a.css, b.css, ..., e.css) and after concatenating and compressing them, I get a new file called compressed.css. Now, I need to verify if each of the original CSS files is included in the compressed.css file. Are th ...

cssfilecompressionminify

Obtain HTML content from a loaded JScript frame

I'm in the process of designing a JScript frame and I'm looking to retrieve the HTML content that has been loaded into it. Does anyone have any suggestions on the best way to accomplish this? ...

htmlurlloadjscript

Exploring ways to display featured posts within specific category sections

I have 2 featured posts in 1 div id, one with a big class and the other with a small class. I want the big featured div to display posts based on categories. The code for the big featured post is shown below: <div class="main_feat"> ...

phpjavascripthtmlwordpress

The Link Element Does Not Appear Properly When Styled Using nth-of-type Selector

https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Can anyone help me understand why the fourth .content <Link/> is not displaying when using the given CSS styling? Could it be a bug in the code, or am I overlooking something important? ...

javascriptcssreactjsreact-router-dom

I am seeking to modify the CSS of the parent component upon the loading of the child component in Angular

In my Angular blog, I have a root component with a navigation bar containing router links to create a single-page application. My goal is to darken the background around the link when the child component loads. Currently, the link highlights only when pres ...

htmlangulartypescript

What is the best way to update the color CSS property of an element with jQuery?

Can someone explain to me how to modify CSS using jQuery? I am trying to change the font color of "Valid VIN" to red, but my current code doesn't seem to be working: $("#result").html(<font color="red">"Valid VIN"</font>); ...

jquerycss

Content moves as you scroll, not within a lightbox

I have implemented lightbox style overlays for my 'Read More' content on my website. However, I am facing an issue where the content within the lightbox does not scroll; instead, the background page scrolls. Any assistance with resolving this p ...

javascriptjqueryhtmlcsslightbox

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

The div container is not expanding to full width on mobile screens when using Next.js and Tailwind CSS

My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...

htmlcssnext.jstailwind-cssresponsive

Show a toast message and reset the form upon submission

Here I have created a contact form using HTML, CSS, and JavaScript. However, I'm facing an issue where the form redirects me to a page displaying the submitted details after clicking the submit button. I want to display a toast message instead and res ...

javascripthtmljquerycssforms

What happens when dynamically loaded static resources are loaded?

Currently, I am dynamically injecting HTML into a page using JQuery AJAX. The injected HTML contains script and link tags for JS and CSS files respectively. The issue I am facing is that my initPage() function runs before the script containing its definiti ...

javascriptjqueryhtmlcssajax

Having trouble with jQuery animate function?

I have been struggling to get my animate function to work, despite looking at multiple similar posts and making modifications to my code. My goal is to make an image of a plane move from left to right across the screen and stop halfway. Here is the code I ...

javascriptjquerycss

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3