Why are that one line of paragraph not following the others by aligning with them

Question

So I want this paragraph of "Numbers of hours you work with pc" to align under and between the labels and input type= text of studentnumber: and games:

it is way out of position as you can see, how can I fix this?

.container {
    background-color: rgb(157, 230, 255);
    height: 600px;
}

.container input {
    display: inline-block;
    float: left;
    margin: 20px;
}

.container label {
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    margin: 20px;

}

form {
    text-align: left;
    

}

<div class="container">
        <form>           
            <div style="line-height: 400%;">
                <br>
            </div>
            
            <label for="studentnumber">Studentnumber:</label>
            <input type="text">
            <br>
            <p>Numbers of hours you work with pc with</p>
            <br>
            <label for="games">Games:</label>
            <input type="text">
            <br>
            <label for="sosial media">Sosial media:</label>
            <input type="text">
            <br>
            <label for="skole">School:</label>
            <input type="text">    
        </form>
    </div>

Answer 1

Since the <label> and <input> elements are floating float: left; you need to suppress the floating effect for the text.

Therefore, applying a clear: both; (or just clear: left;) on the <p> element will force it to wrap to a new line.