Search code examples
csslayoutnavigationstyling

Why there is a horizontal scroll on mobile

If you shorten the width of the window or check on mobile, there is a horizontal scroll, breaking the layout.

Live Link

I believe most probably navigation is causing this, but no clue how. Tried everything from setting width/max-width to 100%, overflow: hidden, etc.

Can someone help how to resolve this?

Solution

  • So it seems to be caused by padding in these 2 places

    #header-content .container {
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: right;
    position: relative;
/*  padding: 5rem; */
}

    #about-content .container {
/*  padding: 3rem 5rem; */
}

    One tip you could use to find the place that is overflowing is to put this code at the top of your file

    * {
  outline: 1px solid red;
}

    This will add an red outline to every object so you can see an overflow quicker