# Fixing overflow issues

Sometimes, the content takes up too much space, causing unintentional horizontal scroll. This frustrates users, especially on mobile, and should be remedied.

Here's a video demonstrating how to diagnose and fix it. After the video, there are detailed instructions.

{% embed url="<https://vimeo.com/1031704623>" %}

## Find the culprit

Toggle "Show" on each instance in the navigator until the horizontal scroll goes away.

It's best to start with the outermost wrappers, like the header, main, and footer, to see which one is causing it, then drill down to inner wrappers, like sections.

Continue going deeper into the nested instances until you find the innermost instance causing the horizontal scroll.

## Fix the culprit

There is something in the culprit causing the content to extend past the viewport boundaries.

Many styles can cause overflow, but here are some common things to look for:

| Issue                                                                                            | Solution                 |
| ------------------------------------------------------------------------------------------------ | ------------------------ |
| Fixed widths                                                                                     | Remove it or set to auto |
| Flex rows without the ability to wrap                                                            | Allow wrapping           |
| A single word like "responsibility/accountability" (note the "/" will prevent it from breaking). | Separate with a space    |
| Wide content that can't wrap                                                                     | Set overflow to auto     |

## Related

* [Anatomy of the Webstudio builder](/university/foundations/anatomy-of-the-webstudio-builder.md) – Learn the builder interface and how to navigate instances
* [Element](/university/core-components/element.md) – The fundamental building block for creating layouts
* [Layout & Flexbox](/university/foundations/layout-and-flexbox.md) – Understand how layouts work to prevent overflow
* [Responsive design](/university/foundations/responsive-design.md) – Build layouts that adapt to different screen sizes


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/misc/fixing-overflow-issues.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
