React Bootstrap Align Brand Left

Code Help
1

So recently I’ve started using react bootstrap and I ran into an interesting problem that I can’t seem to find the answer to. I’ve never used bootstrap, let alone with react, so I might be missing the obvious here, but I hope someone who knows bootstrap can help.

The problem is simply this, I want to create a navbar where the brand ALWAYS stays aligned as far as it can to the left side. When I view it in the webview, it is perfectly fine, but if I open the page in a new tab, then it is no longer centered.

Webview Image

image

New Tab Image

image
image1361×593 7.84 KB

And here is the code I am currently using for the navbar.

<Navbar bg="dark" variant="dark">
    <Container>
        <Navbar.Brand href="/">
            <img src="/logo.png" width="40px" height="40px"></img>
            {" "}
            ShapeCraft
        </Navbar.Brand>
        <Nav className="me-auto">
            <Nav.Link href="#shop">Shop</Nav.Link>
            <Nav.Link href="#chat">Chat</Nav.Link>
        </Nav>
    </Container>
</Navbar>

And just for reference, here is the repl link and the page link.

2

Does nobody know bootstrap or did everyone just not see this topic?

1 Like
3

Probably no one has seen it yet who can help, but hopefully someone who can will see it later. Unfortunately, I don’t know bootstrap so I can’t help.

1 Like