Html – not able to edit contents of form using css

so im a begginer and i just finished creating a rough of an signup form and for some reason im not able to use display:inline-block and i need to individually edit the contents of the form whats wrong here and how can i solve the issue is it normal or is that how each element needs to be edited ??

tried a lot of things but the internal contents wont budge and all together and heres the code also for additional tips can someone tell me different ways to center a div on the middle of the screen 🙂

import React from 'react'
import './signup.css';
import { Outlet } from 'react-router-dom'

function Signp() {
  return (
    <div className='signupcontainer'>
        <form className='signup'id='signup'>
        <fieldset>
            <h1 >Sign-Up</h1>
        <section>
            <div className='FN'>First Name
            <label><input type='text' name='FNi' id='inp' required/></label></div>
            <div className='LN'>Last Name
            <label><input type='text' name='LNi' id='inp' /></label></div>
            <div>
                <label>Ph.no / E-mail</label>
                <label><input type='text' name='em/no' id='inp' pattern='[0-9]{3}-[0-9]{3}-[0-9]{4}' required/></label> 
            </div>
            <div>
                <label>password</label>
                <label><input type='password' name='pas' id='inp' required/></label>
            </div>
            <div>
                <label>Re-enter password</label>
                <label><input type='password' name='repas' id='inp' required/></label>
            </div>
            </section>

            <div>
                <label>Gender</label>
                <br/>
                <label><input type='radio' Name='gen'/>MALE</label>
                <label><input type='radio'Name='gen'/>FEMALE</label>
                <label><input type='radio' Name='gen' />OTHERS</label>
            </div>
            <label><input type='button' name='submit'value='Submit' required/></label>
            </fieldset>
            </form>
            <Outlet/>
    </div>
  )
}

export default Signp


#css code 


.signupcontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    


}
#signup{
    border: 2px solid black;
    padding: 0.5rem;
    margin: 54px;
    width: 500px;
    display: inline-block;
    align-items: center;
    
}
.signup h1{
    justify-content: center;
    text-align: center;
    font-size: 30px;
}

#inp{
    display: inline-block;
}