Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . 

@charset "utf-8";
/* Custom CSS Styles */
body {
    z-index: 0;
    background: url(../images/background-texture%20d.jpg);
    width: 100%;
}
#page {
    z-index: 1;
    width: 1000px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#Footer {
    width: 100%;
    height: 230px;
    position: absolute;
    left: 0px;
}

... (additional CSS code follows)
htmlcss

Answer №1

The primary explanation for this issue lies within the div labeled as Links. By default, it occupies a full 100% of the width. The subsequent adjustment shifts it to the right by 329px (via left: 329px), resulting in unwanted white space.

To address this, consider implementing the following solution:

#Links {
    position: relative;
    top: 5px;
    text-align: right;
    width: 1011px;
    margin: 0 auto;
}

This will still leave you with an additional two pixels, stemming from the borders of #TopLinks and #HeaderContainer. To rectify this, either employ box-sizing: border-box or eliminate the 100% width, opting instead to set right: 0.

Answer №2

The lack of space on the left side of the content is noticeable, while the excess space on the right seems to be a result of how elements are positioned. By adjusting the left property for block elements, their width remains unchanged and requires additional space beyond the screen. To address this issue, you can either manually set the width or modify the display property to inline-block (focus initially on #Links to understand the impact).

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

Transform SVG with a Click

Can someone assist me with rotating the pink area on click and moving it to a new angle from its current position? I am looking for a way to save the current position of the pink area and then, when clicked, move it smoothly to a new position. Your help ...

javascripthtmlsvgcss-transitionscss-transforms

What are the permissible child elements for an <a> tag?

Lately, I've been focused on structuring HTML code and it got me thinking about which elements are actually allowed as children of an <a> element. Can you help clarify? ...

csshtml

Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1 Appreciate any help! CSS: ...

htmlcss

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

javascriptjquerycsstwitter-bootstrap

Tips for accessing a child element within a specific div from a selection of divs in Angular

I recently started learning angular and I am working on a project that involves displaying a list of people. Each person's name is displayed along with a button to send a friend request. When the send request button is clicked, it should disappear and ...

htmlangularangularjs-directive

Exploring Data in a Tree View Format on a PHP Website

Looking for advice on displaying categories and corresponding subcategories on the left side of my website (built using Php and Javascript). I would like the tree to be movable, similar to the functionality featured on this link: Any suggestions on how I ...

phpjavascripthtmlajax

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

React - Issue with automatic resizing of divs

Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...

htmlcssreactjsreact-hooksresize

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

HTML and CSS link conflict

As a beginner in CSS, I am experimenting with creating a simple website using HTML and CSS. However, I have encountered an issue where the links on the left side of my page are being interfered with by a paragraph in the middle section. This causes some of ...

htmlcss

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

javascripthtmlexpressmongooseejs

How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially ...

javascriptjquerycss

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

javascriptjquerycsshtml

Delivering HTML Email

I want to send an HTML email with images using Google's SMTP servers. Here is the HTML code with inline CSS that I have generated: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type& ...

htmlscalaemailmime

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

javascripthtml

Shifting the div with a sliding animation!

My webpage features a video background with text overlay, and I am looking to add a button in the center of the page. When users click on this button, I want the current text div to slide up using a CSS transition, revealing another div with the same effec ...

javascriptjqueryhtmlcsscss-transitions

Is it acceptable to replicate another individual's WordPress theme and website design in order to create my own WordPress website that looks identical to theirs?

It may sound shady, but a friend of mine boasts about the security of his WordPress website, claiming it's impossible to copy someone else's layout or theme. However, my limited experience in web development tells me otherwise. I believe it is po ...

htmlcssjsonwordpresswordpress-theming

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

javascripthtmlcss

Hide button for the last input form to dynamically remove in jQuery

At first, I hide the remove button when there is only one form. However, if there are multiple forms and the user deletes all of them, I want the last form to remain visible and not be deleted. Can someone assist with this issue? Here is my code: <! ...

javascriptjqueryhtml

What is the best method for saving and accessing a user-entered date using session storage?

https://i.sstatic.net/I8t3k.png function saveDateOfBirth( dob ) { sessionStorage.dateOfBirth = dob; } function getDateOfBirth() { document.getElementById("confirm_dob").textContent = sessionStorage.dateOfBirth; } function pr ...

javascripthtmlforms