Why are horizontal scroll bars shown on my website?

by

Note that you have your <p> elements relatively positioned and shifted right with right: -450px.

With position: relative the original space for the element is reserved. So while you’re shifting the element rightward 450px, its original space in the layout is kept intact, and the document is lengthened horizontally. That’s the reason for the scrollbar.

enter image description here

Remove or adjust the right: -450px rule to see the difference.

Also, simply for contrast, switch relative with absolute positioning, which removes the element from the document flow, and the original space is eliminated.

Read more about CSS positioning at MDN.

More Related Contents:

  1. How to Create Border In Css Iike
  2. CSS margin terror; Margin adds space outside parent element [duplicate]
  3. Table fixed header and scrollable body
  4. How to vertically align text inside a flexbox?
  5. display: inline-block extra margin [duplicate]
  6. CSS Single-column layout centered fixed-width 100% height w header and footer
  7. Position icons into circle
  8. How can I have two fixed width columns with one flexible column in the center?
  9. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  10. How to style dt and dd so they are on the same line?
  11. How to display vertical text in table headers with auto height / without text overflow?
  12. Add target=”_blank” in CSS
  13. Center image element in parent div
  14. Why is the span’s line-height useless?
  15. CSS – How to have children in different parents the same height?
  16. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  17. Can you use CSS to mirror/flip text?
  18. Fallback background-image if default doesn’t exist
  19. CSS list-style-image size
  20. Make a parent div webkit-filter not affect children
  21. Square DIV where height is equal to viewport
  22. Pin a flex item to the bottom of the container
  23. min-height does not work with body
  24. How to make div appear in front of another?
  25. How do I avoid a page break immediately after a heading
  26. Can flexbox detect when a flex item wraps?
  27. What’s the point of valid CSS/HTML?
  28. Why does display: inline-block; remove an underline from a child element?
  29. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  30. Why does a border increase the element’s width?

Leave a Comment