CSS React-bootsrap nav - width greater than browser width

Question

This is bugging me because it only moves right to left slightly and everything is offset to the right because the width is flowing over.

I have set to my navbar properties:

.navbar{
    background: rgb(7, 102, 197);
    background: linear-gradient(0deg, rgba(7,101,195,1) 0%, rgba(0,72,144,1) 100%);
    padding:0;
    width: 100%;
}

within index.css i also have width 100%

From the second image you can see it is greater

I did try applying:

overflow-x:hidden;

But this doesn't remove the issue

is this issue only in navbar ? or the whole body is affected ? — Saikat Roy
– Saikat Roy, Commented Feb 7, 2022 at 5:49
The issue is not with the navbar. Some other element is overflowing out of body — zainhassan
– zainhassan, Commented Feb 7, 2022 at 5:56
That's what make the distance between navbar to the absolute right. somewhere in the other div there are some elements that has fixed width defined in px . that's making things wider and push out of the max-width. — Saikat Roy
– Saikat Roy, Commented Feb 7, 2022 at 6:07

kkpareek · Accepted Answer · 2022-02-07 05:59:42Z

1

Have you set the width to 'device-width' in the HTML?

Because this 100% width is subjective to our device- your code works fine with the following tag added in HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

answered Feb 7, 2022 at 5:59

kkpareek

5401 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS React-bootsrap nav - width greater than browser width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related