i am Having difficulty in placing my text in the center of my div container while using the styled-components to do so

please, I am new to react and I am have this issue which I really need help on. I am developing my first and I am using styled-component to applying styling to my app, below is my code...

import React from 'react';
import styled from "styled-components"

const section = () => {
  return (
      <Wrap>

     <Item Text>
         <h3>Model S</h3>
         <p>Order Online For Touchless Delivery</p>
    </Item Text>

      <Button Group>
                <Right Button>
                 Existing Inventory
             </Right Button>

             <Left Button/>
             Custom Order
             <Left Button/>

         </Button Group>

      </Wrap>
  )
};

export default section;

 const Wrap = styled .div` 
width : 100vw;
height : 100vh;
background-image : url (images-tesla-clone/model-s.jpg);
background-size : cover;
background-position : center;
background-repeat : no-repeat

`

const Item Text = styled .div`
padding: 16vh;
text-align: center`

const Button Group = styled .div`
display: flex

`
const Button Button = styled .div`
background-color: rgba(23, 26, 32,0.8);
height : 40px;
width: 256px;
color : white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
opacity : 0.85;
text-transform: uppercase;
font-size: 12px

`
const Right Button = styled .div`
${Left Button}
  
`

I am trying to center my text in the center of my container since I am the using styled-components to do so inside of the react component. But the text keeps staying outside the container , I am really confuse of what next to do

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum