Fixed styling issues

src/App.js

@@ -21,7 +21,7 @@ function App() {
           <h3 className='text-white'>Ivrnet</h3>
         </div>
         <div className='p-5'>
-          <div className='offset-md-2 col-md-8'>
+          <div className='offset-md-3 col-md-8'>
             <TelepayForm />
           </div>
         </div>

src/component/Telepay.js

@@ -130,7 +130,7 @@ const TelepayForm = () => {
           </Typography>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='firstName' className='form-label mt-1'>First Name</label>
             </div>
             <div className='col-md-9'>
@@ -146,7 +146,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='lastName' className='form-label mt-1'>Last Name</label>
             </div>
             <div className='col-md-9'>
@@ -162,7 +162,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='address' className='form-label mt-1'>Address</label>
             </div>
             <div className='col-md-9'>
@@ -178,7 +178,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='city' className='form-label mt-1'>City</label>
             </div>
             <div className='col-md-9'>
@@ -194,7 +194,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='province' className='form-label mt-1'>Province</label>
             </div>
             <div className='col-md-9'>
@@ -210,7 +210,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='country' className='form-label mt-1'>Country</label>
             </div>
             <div className='col-md-9'>
@@ -226,7 +226,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='email' className='form-label mt-1'>Email</label>
             </div>
             <div className='col-md-9'>
@@ -243,7 +243,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='phone' className='form-label mt-1'>Phone</label>
             </div>
             <div className='col-md-9'>
@@ -259,7 +259,7 @@ const TelepayForm = () => {
           </div>
 
           <div className='form-group row mb-4'>
-            <div className='col center-label'>
+            <div className='col-md-2 center-label'>
               <label htmlFor='description' className='form-label mt-1'>Description</label>
             </div>
             <div className='col-md-9'>
@@ -326,7 +326,8 @@ const TelepayForm = () => {
           </div>
         </Paper>
         {success && (
-          <Paper elevation={1} style={{backgroundColor: 'rgb(56, 142, 60)', color: 'white'}} sx={{ padding: 3, marginBottom: 4 }}>
+          <Paper elevation={1} style={{ backgroundColor: 'rgb(56, 142, 60)', color: 'white' }}
+                 sx={{ padding: 3, marginBottom: 4 }}>
             Access Code: {success.access_code}
           </Paper>
         )}