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

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

The lightbox feature on the page is not functioning properly

On my website, I have a beautiful lightbox created using fancybox.net. You can check it out here: I also use gallery codes to display images in a gallery format. Below is the jQuery code I am using: $(document).ready(function() { $(".gallery").fancy ...

javascriptjqueryhtml

Dragging objects on a map is done using jQuery and it causes them to bounce

Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...

javascriptjqueryhtmldraggable

Looking to achieve a mouse over effect in jQuery?

For the past few days, I've been grappling with a question that I just can't seem to find the right answer to. I'm trying to create a mouseover effect similar to the one on this template (the Buddha at the top of the page). Despite my best e ...

javascriptjquerycssmouseover

Changing React Phone Number input field's default style: A step-by-step guide

Is there a way to modify the appearance of the react-phone-number-input component using this npm package: https://www.npmjs.com/package/react-phone-number-input? I am working with React Hook Form and Tailwind CSS alongside this component. However, I' ...

cssreactjstailwind-cssreact-hook-form

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

javascriptc#htmlasp.net-corerazor-pages

Utilize Mapbox-GL.JS to animate several points along designated routes

I'm encountering issues with the following example: Animate a point along a route My goal is to add another point and routes in the same map container. Here's what I've tried so far: mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t ...

javascripthtmlmapsmapboxmapbox-gl-js

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

Adjust the number of columns displayed when rendering with Datatables

I've utilized DataTables to create a dynamic datatable. $('table').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'excel', 'print', ], responsive: true } The table I created c ...

jqueryhtmldatatabledatatables

Hover effect not displaying upon mouse exit

I am working on a feature where a series of images change when hovered over, with a div animating as an overlay on the image. Here is the code snippet: // hiding overlays initially $(".mini-shop .item .image a div").hide(); // toggling overlay and second ...

javascriptjqueryhtmlcss

I am looking to create a split div with a diagonal line running through

Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...

htmlcss

Utilize preg_replace to insert your own website ahead of each hyperlink

In need of a solution for my project which involves fetching website content and modifying the HTML code. All links on the website must be replaced with my own links, but I encountered an issue with classes being assigned to some links. Initially, I tried ...

phphtmlregexpcre

Using Ajax with jQuery may encounter issues when running from a local file

I have created a basic HTML file with AJAX functionality. index.html: <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> ...

jqueryhtmlajaxlocal

Aligning images in a table grid of 300px by 300px dimensions

I've included my code below and I am searching for the most effective method to use CSS to center an image both horizontally and vertically within a 300 by 300 pixel square. If the image is larger, it should be resized to fit within the square, while ...

htmlcsshtml-tablecentering

Guide for accessing and interpreting a random folder arrangement using JavaScript located alongside index.html

I am currently developing a testing reporting tool that organizes images into folders, resulting in a structure similar to this: root/ /counter/ img1.png img2.png /alarm/ img3.png The names of the folders like counter and alarm are not f ...

javascriptjqueryhtml

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

What is the best way to prevent right floated DIVs from interfering with each other's positioning, specifically within a specified space?

Despite feeling like this question may have been asked numerous times before, I've searched high and low for an answer to no avail - both here and on Google. My HTML page has a maximum width that limits the size of the content. This content includes ...

javascripthtmlcss

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...

htmlperlseleniumloops