I'm really new to html and css. I'm making a form and having two problems:

1. Wide spacing between question and answers. Second pic is how I want it to look like
2. Cursor:pointer went out of the text (went to top and side). I tried raising radio-buttons margin higher but then the cursor:pointer covers the question.

.form-element {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
}

.form-element span {
    margin: 0 0 5px 0;
}

.radio-buttons {
    display: flex;
    align-items: left;
}

.radio-buttons label {
    cursor:pointer;
}

<div >
            <span>Would you like to remain anonymous?*</span>
            <label for="No.&lrm;"><br />
                <input type="radio" required id="No.&lrm;" name="entry.1808372660" value="No.&lrm;" />
                <span>No</span>
            <label for="Yes"><br />
                <input type="radio" required id="Yes" name="entry.1808372660" value="Yes" />
                <span>Yes</span>
        </div>

CodePudding user response：

<br /> remove this and try

.form-element {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
}

.form-element span {
    margin: 0 0 5px 0;
}

.radio-buttons {
    display: flex;
    align-items: left;
}

.radio-buttons label {
    cursor:pointer;
}

<div >
            <span>Would you like to remain anonymous?*</span>
            <label for="No.&lrm;">
                <input type="radio" required id="No.&lrm;" name="entry.1808372660" value="No.&lrm;" />
                <span>No</span>
            <label for="Yes"><br />
                <input type="radio" required id="Yes" name="entry.1808372660" value="Yes" />
                <span>Yes</span>
        </div>