CODEWITHSUNDEEP
cssreact-bootstrap
ABpositive
ABpositive

Reputation: 303

CSS React-bootsrap nav - width greater than browser width

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%

Taking up these too many pixels (the below graphic should fit perfectly)

From the second image you can see it is greater

enter image description here

I did try applying:

overflow-x:hidden;

But this doesn't remove the issue

Upvotes: 0

Views: 37

Answers (1)

kkpareek
kkpareek

Reputation: 530

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">

Upvotes: 1

Related Questions