> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/misc/fixing-overflow-issues.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.