Fixed responsiveness issues

src/App.js

@@ -6,7 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 function App() {
   return (
     <div className='App'>
-      <div className='row'>
+      <div className='row m-0 p-0'>
         <div className='d-large position-fixed col-md-2 h-100 logo-back'>
           <div className='mb-2'>
             <img src={logo} className='App-logo' alt='logo' />
@@ -20,11 +20,13 @@ function App() {
           </div>
           <h3 className='text-white'>Ivrnet</h3>
         </div>
-        <div className='offset-md-2 col-md-8'>
-          <header className='mb-4 mt-4'>
-            <h3 className='text-center'>Payment Details</h3>
-          </header>
-          <TelepayForm />
+        <div className='p-5'>
+          <div className='offset-md-2 col-md-8'>
+            <header className='mb-4'>
+              <h3 className='text-center'>Payment Details</h3>
+            </header>
+            <TelepayForm />
+          </div>
         </div>
       </div>
     </div>

src/component/Telepay.js

@@ -242,7 +242,7 @@ const TelepayForm = () => {
                       required
                     />
                   </div>
-                  <div className='col'>
+                  <div className='col-1'>
                     <button type='button' className='btn-close' aria-label='Close'
                             onClick={() => handleDeleteLineItem(index)}></button>
                   </div>