If width: 100% still creates horizontal scrolling, the width value may be correct: the missing piece is often how the browser calculates the box. With the default content-box model, padding and borders are added to the declared width.
How content-box and border-box calculate width
For a 320px parent, the content-box element reaches 370px after padding and borders are added. Border-box fits the content, padding, and borders within the same 320px. This example does not include margins.
.panel {
width: 100%;
padding: 24px;
border: 1px solid #23466f;
}With the default content-box, the content area alone is 100% of the parent's width. Padding and borders extend beyond it. For a 320px parent, this example is 320 + 24 × 2 + 1 × 2 = 370px wide in total. Applying border-box to the same declarations keeps the total width within 320px.
*, *::before, *::after {
box-sizing: border-box;
}border-box includes padding and borders in the declared width. Applying it consistently makes component sizes easier to predict. Check the effect, though, when mixing it with third-party styles that assume content-box.
Set the parent to 320px in a browser, add .panel, and inspect its computed width in DevTools. It should be 370px by default and 320px with border-box. If the result differs, also check the parent's actual width and the panel's margins and min-width.
Overflow should not hide the cause
overflow: hidden clips content that extends beyond a box. That may be intentional for a decorative image, but using it to conceal clipped text or buttons hides functionality from keyboard users and people on small screens.
For an area such as a code block that naturally needs more horizontal room, overflow-x: auto may be more appropriate. Limit scrolling to the component that needs it instead of allowing the entire page to scroll horizontally.
Inspect the actual size in DevTools
Select the overflowing element and inspect its content, padding, border, and margin values. A child's min-width, a long string without break points, or the default minimum size of a flex item may also be responsible. Before adding overflow: hidden to the parent, find which element extends beyond it and by how many pixels. That keeps the fix focused.
Key takeaways
width is interpreted within the box model. border-box includes padding and borders in that width, simplifying layout calculations. Use overflow deliberately on the content area that needs it. When horizontal scrolling appears, inspect the actual box dimensions and minimum widths in DevTools first.
