React Bootstrap NavBar Container, set width to auto - css

Question

I am trying to use a NavBar from react bootstrap. However there seems to be a <div class="container"> that adds width. How do I set this width to auto?
I tried the following:
.navbar > .container {
width:auto;
}
But this margin still remains. I also tried to
<Navbar style={{ width: "auto" }}>
<Navbar.Header>
...
But no success. My complete code:
<Row>
<Navbar>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</Row>

Answer 1

you can use only React Bootstrap Fixed top
<Navbar fixed="top" />
It will auto create the CSS below:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
You can see the this and another positions in documentation here

Answer 2

In your css, try the following:
.navbar > .container {
width:auto!important;
}

Answer 3

Just add "fluid" next to Navbar on your code
<Row>
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand className="lang-de">
<a href="/" />
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Impressum
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>

Answer 4

If you are using the grid system you can set the Container to fluid
<Container fluid>
<NavBar />
<Row>
<div>Personal Digital Assistants</div>
<ProfileCard text="Hello" info='unknown' imageTag={AlexaImg}/>
<ProfileCard text="Sir" info='unknown' imageTag={CortanaImg}/>
<ProfileCard text="Google thing" info='known' imageTag={SiriImg}/>
</Row>
</Container>