How come specifying html { font-size: 1rem; } results in a 1px border on the right side?

I have been working with Bootstrap 4 and have implemented a navbar, among other things.

While learning about media queries, I came across a CSS rule that allows me to adjust the font size slightly throughout my page...

html {
  font-size: 0.9rem;
}

However, after applying this rule, I noticed a strange 1px border/gap appearing on the right-hand side of the entire page.

In this animated .gif, you can see the difference between the normal size with font-size: 1rem;(no border) and the appearance of the border when using font-size: 0.9rem;.

https://i.sstatic.net/uGJUl.gif

This border does not show up immediately upon loading the page; rather, I need to scroll to the right to expose it. Once visible, it remains present.

Is this behavior typical? Are there any potential solutions?

Update:

I realize now that providing some code would be helpful - https://jsfiddle.net/iamrobertandrews/aq9Laaew/266266/

csstwitter-bootstrapbootstrap-4

Answer №1

Modify the footer element by changing the class to p-4 instead of p-3, refer to the code snippet below-

<footer class="container-fluid bg-dark text-white p-4">

</footer>

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

My header has a video background that appears aesthetically pleasing on a desktop screen. However, when viewed on a mobile device, it is off-center and doesn't span the full

I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width. I have tried several ...

htmlcss

Enhance your DIV boxes with a stylish shadow effect when hovering over them

I am in the process of exploring a method to create a shadow animation when each box on the homepage of my website () is hovered over. I envision the animation to be similar to what is demonstrated on this page: . I have referred to this page as a guide to ...

htmlcssanimationhovershadow

Pressing the button will allow you to select and copy the text within the

I am looking to incorporate a mock-chat feature into my website. The concept is to type something on the website, then click a button next to it which will move the text to a frame above. I attempted this using a textarea and even found a code for selectin ...

javascripthtmlcsscopy

Struggling with creating text that adapts to various screen sizes when displayed

As someone who is new to HTML/CSS, I recently developed my first website using the Cargo platform. Within a section on my site featuring various videos, I encountered difficulty in properly positioning the titles over them while ensuring they remain respo ...

htmlcss

Struggling with aligning text in the center of a Navbar using Bootstrap4

I have implemented a Bootstrap navbar and I am facing difficulties in centering the content within it. <nav class="navbar navbar-light bg-light"> <div class="container"> <span class="navbar-brand mb-0 h1" ...

htmlcssbootstrap-4navbar

Floating image positioned between two div elements

Attempting to replicate a specific design using HTML/CSS has been a challenge. I've been struggling to position an image on top of the two divs. I would greatly appreciate any assistance with the design. Here is what I have tried so far: The follo ...

htmlcss

What is the best way to create a cornered button using CSS?

Is there a way to create a button using only CSS? https://i.stack.imgur.com/7mjVV.png This is the code I've come up with so far: .customButton { width: 100px; height: 100px; background: #6d1a3e; position: relative; transform: rotate(-90 ...

css

Stacked Bootstrap cards

Currently, my code is structured as follows: <div class="row row-cols-1 row-cols-md-2 g-4"> {{#each stories}} <div class="col"> <div class="card shadow-sm"> <img class="card-img-top" src="{{ image }}"> <d ...

htmlbootstrap-4

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

Changing the size of the logo as you scroll through the page

I have implemented the following code to resize the logo as I scroll down the page. $(document).on('scroll', function() { if ($(document).scrollTop() >= 10) { $('.logo img').css('width', '50px'); } else ...

javascriptjqueryhtmlcss

Responsive card design created by Bootstrap element

Hello lovely people, I'm currently facing an issue with two triangles that are supposed to be next to each other with a small gap in between. However, when I resize the screen, they start moving freely and don't stay within the designated card ar ...

csstwitter-bootstrapbootstrap-4

Creating links within a single image in HTML?

Is there a way to hyperlink different parts of a single image to various webpages using JavaScript coordinates or any other method? ...

javascripthtmlcss

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

javascriptjqueryhtmlcss

Creating a persistent footer in a modal: A step-by-step guide

I'm currently working on a react-modal that slides in from the bottom of the screen with an animated effect. The challenge I am facing is getting the footer of the modal to stay fixed at the bottom of the browser window. Despite using the standard CSS ...

htmlcssreact-modal

Why do my padding and font size fail to match the height of my container?

When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someo ...

htmlcss

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

javascriptjquerycssresponsive-slides

Styling errors in AngularJS validation code

I am facing an issue with the code below that generates 3 text boxes. When I click on one text box, all 3 of them get focused, despite having different name and label values. <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> <div ...

htmlcssangularjsvalidationng-class

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango