Why there is space in the right side of the box?-CodePudding

I have been trying to make a text next to a picture inside a box, and i have been struggling a lot with it

CSS:

#roundedBox {
    border-radius: 25px;
    background: #363636;
    width: auto;
    height: auto;
    margin: 10%;
    display: flex;
    position: relative;
    
  }

#aboutUsImage {
    max-height: 480px;
    margin-right: 3%;
    margin-left: 4%;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 5%;
    
}

#aboutUsTitle {
    font-size: 20px;
    padding-top: 10%;
    text-align: left;
    
}

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    text-align: left;
    
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
    
}

Javascript:

 <Grid id="roundedBox">
  
  <Image id= "aboutUsImage" src={aboutUs} />

  <Box>
  <Heading id = "aboutUsTitle"> About us</Heading>
  
  <Text id = "aboutUsText"> Founded in 2021, Coded Solution aims to create a secure underlying infrastructure platform for blockchain databases through consensus algorithms of the innovative supernode PoS consensus mechanism.</Text>
  
  <Text id = "aboutUsText2"> This creates solutions for everything including smart contract, wallet, explorer, app, frontend and backend, which is unique in the current market.</Text>

  </Box>
  </Grid>

Result: Huge space on the right side of the code

The result above is unwanted because there is a lot of space next to the title and its paragraph

CodePudding user response：

Change this...

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    text-align: left; 
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: 30%;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
}

...to this.

#aboutUsText {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: auto;
    text-align: left;
}


#aboutUsText2 {
    font-size: 14px;
    font-weight: 300;
    line-height: normal; 
    width: auto;
    margin-top: 10px;
    padding-top: 30px;
    text-align: left;
}