Why does the header not expand to 100% width when the viewport is resized, while the footer does?

I have been struggling to find a solution for a problem with my small website. The issue is that even though both my header and footer are set to width:100%, they do not stretch properly across the screen like I want them to. It's odd because everything else around them, including the wrapper divs and body, are also set to 100%. My footer behaves as expected but my header does not fill the screen width, especially when scrolling horizontally. Despite being styled similarly, I cannot seem to fix this discrepancy.

If you'd like to see the site for yourself, visit:

Any guidance or assistance would be greatly appreciated at this point, as I may have unintentionally added unnecessary styles in an attempt to solve the problem.

cssheaderwidthviewport

Answer №1

The issue can be resolved by eliminating the rule below.

.inside {
  padding: 10px;
}

style.css line 60

Essentially, the problem arises from attempting to apply a rule meant for main content text to containers with a width of 100%. The 100% width applies to the actual element width, resulting in containers that are wider than intended (100% + 20px).

UPDATE:

Upon further inspection, it seems that the issue now lies with #spray and #bottom-wrapper. It is advisable to remove the width:1300px from #spray and the min-width:1300px from #bottom-wrapper. These pixel sizes are conflicting with your percentage-based dimensions.

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

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

My special css style for the div: .message-body { background: #5181a2; padding: 8px 5px; text-align: justify; } I aim to display this particular text inside the div similar to how 'hello hello' appears on the line above. ...

htmlcss

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

cssnode.jsarraysnext.jstailwind-css

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

javascripthtmlcsscarousel

What is the most effective way to stop zooming when focusing on form fields on iOS or similar devices when using font sizes of 16px or lower?

It appears that many proposed solutions involve changing the text to 16px or using JavaScript to determine if the phone is an iPhone. However, altering the style may not be the most practical solution and checking for specific devices like iPhones could ...

javascriptioscssinputzooming

The screen size dominates all the other specifications

I've been attempting to adjust the category images based on screen size, but it seems that only the first specified width is being applied. It appears that subsequent rows of code are being overridden by the initial max-width setting (769px) on this w ...

htmlcss

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

Dividing and arranging dropdown list items into two columns using Bootstrap - An easy guide

How can I split a dropdown ul>li list into two columns using Bootstrap? I am attempting to divide the ul>li into two columns, with one aligning to the left and the other to the right. This is how I am currently doing it: <div class="btn-group" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving a centered layout for a div containing two photos that overlap on a mobile screen resolution

I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...

htmlcssimageoverlay

Ways to align an inner circle in the middle using CSS

div.container{ border:2px dashed blue; position:relative; } span.parent{ display:inline-block; width:40px; height:40px; border:2px solid black; border-radius:50%; text-align: center; position:absolute; right:20px; top:10px; } span.ch ...

htmlcss

Scrolling of div restricted to only horizontal direction

I'm attempting to create a div that contains a paragraph within it. My goal is to have the ability to scroll down when there is overflow due to the content of the paragraph, thus preventing it from extending beyond the boundaries of the DIV. However, ...

htmlcss

varying heights in bootstrap columns

My goal with utilizing the grid system of Bootstrap 3 is to achieve the following visual layout: View my envisioned image here. However, when using the normal row and col structure, I end up with a different result: See what I actually get here. Is there ...

htmlcsstwitter-bootstrap

Place the input field and submit button side by side horizontally

How can I align my submit button next to the input text in a single row, with the submit button on the right side of the input text? This is my code: <div class="mt-12"> <input id="grid-text" ...

javascripthtmlcssbootstrap-4

I am currently exploring options on how to eliminate the excess space at the top of the screen when viewing on smaller devices like mobile phones and tablets

Utilizing bootstrap for my layout, I have a row with 4 columns where the content within each div has varied top margins. This creates a cascading effect and looks great on desktop screens. However, the issue arises when viewing it on smaller screens as the ...

htmlcssbootstrap-4

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

Guide to positioning a card in the middle of a container using Bootstrap

I am struggling to center a card inside a container using CSS properties like justify-content-center, mx-auto, and hardcoding. However, I have not been able to achieve the desired result. Here is the code snippet from my HTML file: <div class="cont ...

htmlcssbootstrap-4frontendbootstrap-5

Expanding Images for Optimal Display in Responsive Design

I have a collection of large images in various sizes that I need to display without any stretching inside a container with set height. The challenge is to make the image fit perfectly within the container without distorting its proportions. I must achieve ...

htmlcssresponsive-design

Outline of a Bootstrap row

I am trying to create a row layout where the background extends beyond the designated row area. The desired design is shown in the image, with an additional white space before the actual text of the row. However, when I attempt to start a new row and set ...

csstwitter-bootstrapbootstrap-4

Adjusting the height of a CSS div to be 0 while also modifying the

I have encountered a unique dilemma <div class="parent"> <p>stuff stuff stuff</p> </div> Using CSS, I set the width and height of parent = 0; because I intend to modify it when a button is clicked. However, for this purpose, I ...

css

What is a simple way to make toggling a .click event more efficient

Currently working on my final project for my webpage development course, I am focusing on creating a blog-themed website. My goal is to implement a feature where clicking on a profile picture expands it into a box displaying a bio and additional informatio ...

javascriptjqueryhtmlcssjquery-animate