Converting regular bootstrap code into React Bootstrap styled component - reactjs

Question

I am following a tutorial where a person is teaching me how to write Bootstrap code. They created a top bar that goes across the entire browser width with the following code
CSS
.top-bar {
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
}
.topbar a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
}
HTML Code
<div class="top-bar">
<div class="container">
<div class="col-12 text-right">
<p>
Call us at [phone]
</p>
</div>
</div>
</div>
The code above created the top bar which runs across the browser width and has a specific height as well.
Now I am trying to get the same behavior but with react-bootstrap and styled-components. So I wrote this code
import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';
import styled from 'styled-components';
const Styles = styled.div`
background: #7aaec4;
height: 2.8rem;
padding: .5rem 0;
text-align: right;
a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
};
`;
export const TopBar = () => {return (
<Container>
<Styles>
<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
Call us at [phone]
</Col>
</Row>
</Styles>
</Container>
)}
And then finally use my component as
<React.Fragment>
<GlobalStyles />
<TopBar />
<div>Hello World</div>
</React.Fragment>
I see that the topbar is not running across the browser screen. it looks like this