padding-left applied to multiple react pages? - reactjs

Question

I currently have a sidebar, and a page (home.component.js) to the right of this sidebar.
To make the content not fall behind the sidebar, I have included a padding left of 20vw in the body of my index.css
background: #f0f0f0 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Inter';
padding-left: 20vw;
}
However, this is casing the same padding to appear on my sign up form, featured below
Code for sign-up page is below
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import TopNav from "./TopNav"
export default class SignUp extends Component {
render() {
return (
<navbar>
<TopNav />
</navbar>,
<div className="auth-wrapper">
<div className="auth-inner">
<form>
<h4>Sign Up</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
</p>
<div className="form-group">
<label>First name</label>
<input type="text" className="form-control" placeholder="First name" />
</div>
<div className="form-group">
<label>Last name</label>
<input type="text" className="form-control" placeholder="Last name" />
</div>
<div className="form-group">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
<p classname="forgot-password text-right">
Already registered log in?
</p>
<button type="submit" className="button">Sign Up</button>
</form>
</div>
</div>
);
}
}
How can I make this padding only appear on my homepage, and not carry forward to my Sign Up page, so the sign up page has no padding-left?
Homepage
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Right of sidebar page </h1>
</div>
);
}
}