Checkbox overlapping checkbox label - html

Question

I am trying to add checkboxes to a login page using code that I found at react-bootstrap.github.io
The problem I'm having is the checkbox is overlapping the label.
My code (register.js) is below
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import { request } from './services/Request';
import { Button, FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
//import { FormRow } from 'react-bootstrap/Form';
import "./Styles/register.css"
export const Register = () => {
return (
<div style={{display: "flex", justifyContent: "center"}}>
<h1> Register </h1>
<div className="Register">
<form onSubmit={handleSubmit}>
</FormGroup>
<FormGroup controlId="email" bsSize="large">
<FormLabel>Email</FormLabel>
<FormControl
required
autoFocus
type="email"
//value={email}
onChange={ onChangeHandlerFn }
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<FormLabel>Password</FormLabel>
<FormControl
required
autoFocus
type="password"
//value={password}
onChange={ onChangeHandlerFn }
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
{['checkbox'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<FormCheck
type={type}
id={`default-${type}`}
label={`I am an individual`}
/>
</div>
))}
<Button variant="primary" type="submit" block>Register</Button>
<span>
Have an account?
Sign in
</span>
<ul>
<li><Link to="/privacy">Privacy & Terms</Link></li>
</ul>
</form>
</div>
</div>
);
};
The problem is the checkboxes are overlapping their labels:
Here is my css:
#media all and (min-width: 480px) {
.Register {
padding: 60px 0;
}
.Register form {
margin: 0 auto;
max-width: 320px;
}
}
ul {
list-style-type: none !important;
margin: 0;
padding: 0;
overflow: hidden;
}
Everything works, for the sake of length, I've done post all of the code.
Any help would be greatly appreciated.

Answer 1

What about adding to the left padding of the label so it clears the checkbox?
label {
padding-left:15px;
}