Start with the element that looks wrong
You need a page you can open in a current desktop browser with built-in developer tools, such as Chrome, Firefox, Edge, or Safari. Menu names and panel layouts vary by browser and version, but the same basic workflow applies. Open the page, right-click the element that looks wrong, and choose Inspect. The Elements or Inspector panel will show its HTML and the CSS rules that apply to it.
Before changing anything, describe the symptom precisely. Is a button wider than its container? Is a card too far from its neighbor? Does text overlap only when the window is narrow? Then select the affected element and move through its parent elements in the HTML tree. A child may be positioned correctly within a parent that is too narrow, has unexpected padding, or uses the wrong layout rule. Identifying the first element whose dimensions look wrong gives you a better starting point than editing the most visible element by default.
Read the box model before adjusting spacing
Look for the box model diagram in the Styles, Computed, or Layout area of developer tools. It separates the element’s content, padding, border, and margin. If a box is larger than expected, check which of those parts accounts for the extra space. Also check its computed width and height: these show the values the browser is using after CSS rules have been applied.
For example, a panel with width: 300px and padding: 20px on each side may occupy more than 300 pixels of horizontal space when it uses content-box sizing. Try box-sizing: border-box in the Styles panel to see whether including padding within the declared width solves the problem. Do not assume every gap is a margin, though. In a flex or grid container, gap can create space between children, while padding creates space inside the container. The box model and the parent’s layout rules help distinguish them.
Find the rule that is actually winning
The Styles panel lists matching CSS rules and usually shows declarations that have been overridden with a line through them. If changing a rule in your stylesheet has no visible effect, inspect the element and look for a later rule, a more specific selector, an inline style, or a media query that supplies the winning value. The Computed view is useful when several rules contribute to the result: it shows the final value and often lets you trace it back to its source.
Use developer tools as a temporary workbench. Toggle a declaration off to see whether it causes the problem, then edit its value or add a replacement declaration. For instance, if a card is pushed outside a row, temporarily disable its fixed width. If the row fits afterward, consider a flexible width or a suitable max-width rather than simply hiding the overflow. Browser-tool edits disappear when the page reloads, so copy the working change into your actual CSS file and reload to confirm it still works.
Check the parent layout and test narrower widths
When several elements are misaligned, inspect their shared parent. For flex layouts, check display: flex, flex-direction, flex-wrap, gap, justify-content, and align-items. For grid layouts, check the column definitions and gap. Some browser developer tools can overlay flex or grid guides on the page; these make it easier to see which tracks or alignment settings produce the visible positions. If a single item behaves differently, compare its own width, margin, and alignment rules with its siblings.
Use the browser’s responsive or device-emulation mode, or simply resize the window, to find the width at which the layout breaks. Inspect the element again at that width: a media query may have changed its styles, or the available space may no longer fit fixed-width children. Horizontal scrolling can also come from a long unbroken string, an image without a responsive width, or a child with a minimum width. Follow the overflowing edge to its source before adding overflow: hidden, which can conceal content rather than fix the layout.
Keep the fix small and verify it
Once you have a likely cause, change one thing at a time and note what it affects. A good fix addresses the layout rule that caused the symptom: adjusting the parent’s columns, allowing items to wrap, or constraining an image may be more reliable than nudging a child with a negative margin. Avoid stacking new overrides until the page happens to look right; that makes the next layout problem harder to diagnose.
Save the change in the appropriate stylesheet, refresh the page, and check both the original problem width and a wider width. Test nearby content too, especially repeated components that share the same class. If the fix works only in one browser-tool session, revisit the stylesheet location, selector, and media query. The goal is not just to make the screenshot look correct, but to understand why the browser placed the elements there and leave a rule that remains understandable later.
