Why does the background image appear on either side of the nav bar in my quote slider in Webflow, even though its width is set at 100%? Also, why is there a thin gray line along the top of the slide wrap?

You're experiencing two visual issues in your Webflow quote slider: (1) the background image shows on either side of the nav bar despite 100% width, and (2) there's a thin gray line at the top of the slide wrap.

1. Check Background Image Settings

• A background image area appearing beyond the nav bar is often due to incorrect alignment, padding/margin, or background sizing settings.
• Go to the Slider or Slide element where you've set the background image.
• Ensure Background Size is set to Cover to avoid repeat or visible image overflow.
• Set Background Position to Center Center.
• Make sure Repeat is set to No Repeat.
• Also check that no padding or extra margins are applied on the sides of the element containing the background. These can offset layout despite 100% width.

2. Ensure Section/Div Width & Overflow Settings Are Correct

• Even if width is set to 100%, the element can appear narrower if its parent has constraints or overflow issues.
• Select the parent container (likely a Section or Div) and:
• Confirm it’s set to width: 100%.
• Confirm there’s no max-width applied that's limiting it.
• Set overflow to hidden to ensure no child elements bleed out of bounds.

3. Inspect the Navbar Positioning

• If your Navbar is Positioned absolutely or fixed, it may overlay the background rather than push it down or integrate with slider layout.
• Try setting the Navbar to static or relative and placing it inside the same parent container as the slider.
• Alternatively, give the Navbar a solid background color to block out visible background on either side.

4. Identify the Thin Gray Line

• A line at the top of the slide wrap is often caused by:

• Default browser styling or border on an element like the Body, Section, or Slide.

• Hover or focus outlines from interactive elements (useful in sliders).

• Unintended 1px border or box-shadow.

• To troubleshoot:

• Select the Slide Wrapper or Slide in Webflow Designer.

• Look in the Style panel for any border, box-shadow, or padding/margin at the top.

• Also check if the Body or wrapper has a rogue 1px top border.

5. Use Webflow’s Inspector

• Use the Navigator panel to examine hierarchy and placement.
• Use Webflow’s Preview mode and if needed, browser Dev Tools to inspect elements’ computed styles and box models.

Summary

The background image overflow is likely caused by improper background size/placement or padding/margin issues, and the gray line is probably a 1px border or shadow from a wrapper or inherited style. Inspect and adjust background settings, layout structure, and any unintended borders to fix both issues.