I want to resize the width of this slider to be the same width as the navigation. I can't seem to figure out where the padding is being added. Can someone please help? Website is here

Dani AI

Generated

As and pointed out, the slider and navigation appear visually aligned in the screenshots. If a tiny difference is still visible on your machine, the usual culprits are padding/margin on a wrapper, the image itself not filling its container, differing box-sizing rules, or a plugin wrapper with a fixed width. Use the browser devtools to compare the computed box model for the nav and the slider wrapper to find which property differs.

Quick, practical checks (do these in DevTools):

  • Add a temporary outline to reveal true element boundaries:
* { outline: 1px dashed rgba(255,0,0,0.3) !important; }
  • Ensure slider images fill their container:
.your-slider-class img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
  • If padding is included in the element width, switch to border-box so padding does not add extra size (see MDN box-sizing).

Also check: html/body default margin (set to 0), any left/right margins on the slider wrapper, float/position rules, and media queries that change sizes at particular viewports. Since mentioned the issue looked fixed, verify at the same zoom and viewport size — tiny differences often only appear at specific widths. Remove the debug outline before publishing.

Recommended Answers

All 3 Replies

The width appears to be the same as your navigation, unless I'm not understanding what you are referring to.

Capture44

Dear kimmi_baby, I can't see the difference in width btw the navigation/Meny bar and the slider. Please be more specific so we can help you :)

I think she has fixed the problem, i don't see the slider being uneven with the navigation.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.