What could be causing my website to have a horizontal scroll even when the width is set to 100%?

My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly appreciated.

You can view my website here:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JG.OFFICAL</title>
<link rel="stylesheet" href="style.css">
...

<p><strong>CSS</strong></p>

<pre><code>header {
background-color: rgba(0,0,0,0.0);
height: 60px;
width: 100%;
margin-top: 0px;
}
.logo {
...
.social-icons {
width: 100%;
}
htmlcss

Answer №1

Presently, there are two main reasons for the issue.

  1. The image is too wide, with a width of 1228px
  2. The footer extends beyond the 100% width due to padding

Both factors cause the content to exceed the 100% width. To resolve this, you can implement the following CSS:

#img-wrapper img {
    max-width: 100%;
}

footer {
    box-sizing: border-box;
}

To prevent this from happening again in the future, consider applying these properties more universally at the beginning of your CSS code:

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

What is the purpose of box-sizing: border-box;?

The width and height properties include the content, the padding and border, but not the margin.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer №2

The footer on your website currently has a padding-left: 20px; property applied to it. If you decide to remove or modify this property, the horizontal scrolling feature will no longer be present.

By the way, a reliable method to verify elements like this is:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

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

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

cssvue.jssassscope

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

Having trouble making my if / else statement show the_header_image_tag on WordPress

Having some trouble getting my if / else statement to function correctly. I am using a WordPress function called '' and I want to apply different CSS styles based on whether it is used or not. My theme allows for the display of a banner, but onl ...

phpcsswordpress

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

javascriptjqueryhtmlcss

What is the best way to switch between different styles for each paragraph using CSS?

I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...

htmlcss

Transform audio file into a base64 encoding

I am currently developing a Phonegap application for a friend that will allow users to record audio on their phone, save it to the browser's local storage, and then upload it at a later time. As far as I know, local storage does not support storing b ...

javascripthtmlcordovabase64local-storage

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

Selecting multiple elements with the same attribute value using jQuery

I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...

javascriptjqueryhtml

jquery modal not displaying

My page is designed to display a dialog containing a set of guidelines using a PHP script that determines which guideline(s) should be shown and generates the corresponding div element(s). Afterwards, I utilize a simple $(document).ready( function() { $(" ...

jqueryhtmldialog

Tips for making an appended element match the height of an image

After embedding the div .soonOverlay into specific .smallCatalogBlock's, I am facing difficulty in adjusting the height of soonOverlay to match only the height of the img within smallCatalogBlock. Currently, its height extends throughout the entire co ...

javascripthtmlcss

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

In HTML, adjust column widths for multiple tables according to the widest column present in any of them

With Python, I am creating an HTML page that contains multiple tables with the same number of columns, all holding the same type of data. While the generated page is functional, I would like to improve readability by ensuring that all tables have the same ...

javascripthtmlcssdynamichtml-table

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

Utilize CSS Steps to incorporate the initial position

I'm experimenting with CSS steps to create a unique visual effect resembling a "light board". The setup involves a column of 18 divs acting as individual "bulbs", with an animation that positions a div behind each one to simulate a "lit up bulb." The ...

css

What is the best way to adjust the row and column layout in bootstrap?

As I was creating a layout to showcase all of the bootstrap cards in a neat and organized manner, I noticed a peculiar issue that's been bothering me. Everything looks great when the columns are filled or when there's only one card present. Howev ...

htmlcssbootstrap-4layoutbootstrap-5

Notification of failed fetch in backbone

We are experiencing a problem with our backbone application. Our goal is to show a notification to the user when a fetch fails (due to timeout or general error). Instead of displaying an error message on a new page, we want to overlay a dialog on top of th ...

javascripthtmlbackbone.js

Issue encountered while using Material-UI makeStyles: unable to access property 'down' due to being undefined

I'm currently in the process of developing my own website using Material-UI and I'm facing an issue with making it responsive. My goal is to hide an image on smaller screens by utilizing [theme.breakpoints.down('md')]. However, I keep e ...

cssreactjsmaterial-uijssmakestyles

An error occurred: Reaching the maximum call stack size when utilizing the .map function in jQuery

Encountering a console error: Uncaught RangeError: Maximum call stack size exceeded This is the jQuery snippet causing trouble: $(document).on("change","select.task_activity", function(){ selected_activity = $("select.task_activity :selected").map(fu ...

javascriptjqueryhtml