Fixed html violation and styling

src/App.js

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

src/component/Telepay.js

@@ -129,6 +129,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='firstName'
                 label='First Name'
                 placeholder='Enter your first name'
                 variant='outlined'
@@ -145,6 +146,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='lastName'
                 label='Last Name'
                 placeholder='Enter your last name'
                 variant='outlined'
@@ -161,6 +163,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='address'
                 label='Address'
                 placeholder='Enter your address'
                 variant='outlined'
@@ -177,6 +180,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='city'
                 label='City'
                 placeholder='Enter your city'
                 variant='outlined'
@@ -193,6 +197,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='province'
                 label='Province'
                 placeholder='Enter your province'
                 variant='outlined'
@@ -209,6 +214,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='country'
                 label='Country'
                 placeholder='Enter your country'
                 variant='outlined'
@@ -225,6 +231,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='email'
                 label='Email'
                 placeholder='Enter your email'
                 variant='outlined'
@@ -242,6 +249,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='phone'
                 label='Phone'
                 placeholder='Enter your phone number'
                 variant='outlined'
@@ -258,6 +266,7 @@ const TelepayForm = () => {
             </div>
             <div className='col-md-9'>
               <TextField
+                id='description'
                 label='Description'
                 placeholder='Enter description'
                 variant='outlined'