The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue.

I have provided links to both Codepen and Netlify below:

Codepen:

https://codepen.io/bladeranner5005/pen/QWObNpZ

Netlify:

HTML

<!doctype html>
<html lang="it">
<head>
    <!--Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Font links-->
    ...

CSS

/*Essential CSS styles*/

body {
    padding-top: 55px;
    margin: 0;
}

/*Navbar styling*/
...
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Upon reviewing your codepen, I didn't spot the culprit right away, but a simple solution to eliminate horizontal scrolling is by adding this CSS:

 html {
  overflow-x: hidden;
}

Answer №2

The issue stems from the margins of your central logo, identified by the code "#animation". A potential solution is to set "--bs-gutter-x" to a value of "0", which appears to resolve the problem.

Answer №3

Rectify the issue within the grid:

.row {
    --bs-gutter-x: 0;
}

Alternatively, you can include this additional style:

body {
    width: 100vw;
    overflow-x: hidden;
}

Answer №4

Seems like there's a small issue with the div located below the <!--SPACING 6--> comment in the My Work section. To resolve this, simply remove the class="row" from that particular div. Here's an illustration:

<!--SPACING 6-->
<div>
  <div class="work-buffer">
  </div>
</div>

I've also observed that the work-buffer class is primarily used for spacing purposes. A more efficient approach would be to eliminate this div entirely and instead apply padding-bottom to the <section> tag containing the "My Work" content.

Answer №5

Resolved by incorporating CSS into the HTML document as shown below:

body {
    margin: 0;
    overflow-x: hidden;
}

Modified to:

html, body {
    margin: 0;
    overflow-x: hidden;
}

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

Two divs positioned to the right on top of each other

I want to align two divs on the right side of their parent div, one above the other. Here's a visual representation: div#top |-------------------------------------||------------| |div#parent ||div#menu | | ...

csshtmlpositioning

HTML comment without the presence of javascript

Is it possible to use different expressions besides checking for the browser or version of IE in order to display/hide content? For example: <!--[if 1 == 0]--> This should be hidden <!--[endif]--> I am considering this option because I send o ...

javascripthtmlif-statement

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

cssimagesprite

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Is there a way to make my code only execute the onlick function after a button is pressed? I want to prevent any action from happening before that. <!-- deactivate onclick function --> <div class="boardsection2" id="2_8_7" oncl ...

javascripthtml

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

Show a different image with a matching title each time the page loads

I need help creating a JavaScript script that will display a random image from an array along with an associated title each time the page loads. Is there a way to do this without using an onload function placed in the body tag? Currently, my code relies o ...

javascripthtml

App.controller attributes in HTML tags are not receiving the value of the HTML variable

In the process of developing a simple student-teacher web application, I am utilizing AngularJS to handle the front-end. Within my JavaScript file, there are two app controllers - one for fetching student data and another for retrieving subjects assigned t ...

javascripthtmlangularjsweb-frontend

What causes loss of focus in a React input element when it is nested inside a component?

When I have an input element connected to the React Context API, updating the value onChange works fine when the element is not nested within a component. However, if I render a different component just under the input that returns another input field conn ...

htmlreactjsformsecmascript-6ecmascript-2016

What is the best way to position two out of the three link tags to the right side?

This is the code snippet I am currently working with: <table> <tr> <td>&nbsp;</td> <td> <a id="btnAutoSuggest">Suggest Title</a> <a id="btnOK">OK</a> <a id ...

htmlcss

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/ This is my current result: https://i.sstatic.net/VygSy.png My project involves creating a slider to display different ages from an array, such as 15, 25, ...

javascripthtmljquerycssbootstrap-4

Tips for showcasing information entered into text fields within a single container within another container

After creating three divs, the first being a parent div and the next two being child divs placed side by side, I encountered an issue with displaying input values. Specifically, I wanted to take values from input text boxes within the second div (floatchil ...

javascripthtmlcsstags

Update the href attribute when a button is clicked

Note: The buttons in the corner will not be submitting the search. The go button would still need to be clicked to submit it. Currently, I am working on a fun project during my free time at work. This project is not meant to be anything serious, but rathe ...

javascriptjqueryhtml

Customizing Ngx-bootstrap Carousel Indicator, Previous, and Next Button Styles

<carousel > <a href=""> <slide *ngFor="let slide of slides"> <img src="{{slide.imgUrl}}" alt="" style="display: block; width: 100%;"> </slide> 1. Is there a way to substitute the indicators with images ...

htmlcssbootstrap-4angular6ngx-bootstrap

Exploring the inner workings of AngularJS SEO in HTML5 mode: Seeking a deeper understanding of this hidden functionality

There are plenty of resources available for incorporating SEO-friendly AngularJS applications, but despite going through them multiple times, I still have some confusion, especially regarding the difference between hashbang and HTML5 mode: In hashbang (# ...

javascripthtmlangularjsseoweb-crawler

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

phphtml

Concealing the TinyNav Drop-Down Menu

Currently, I am utilizing TinyNav on my website and it is working wonderfully. However, due to our extensive menu system, the tinynav dropdown appears quite large. I have been attempting to figure out a way to hide all sub-menus without success. I experim ...

javascriptcssdrop-down-menumenusubmenu

AngularJS dropdown not reflecting changes when using ng-selected

While working with AngularJS, I have encountered an issue where the first child of the select element remains empty despite my efforts to populate it. Below is the HTML code snippet: <select id="connectTV" aria-label="How many Dish TVs" ng-model="conn ...

javascripthtmlangularjsangularjs-ng-repeat

Navigating a dynamic table by looping through its generated tr elements

I am currently working with a dynamically created tr table that includes individual rows of data and a fixed total sum at the bottom. The total sum does not change dynamically. var tmp = '<tr id="mytable"> <td id="warenid">'+data1.id ...

javascriptjqueryhtml