How can I make this stay in the while getting the results I want?

Question

In the following JSFiddle, I show the unwanted behavior. Even though the <div> is in the <nav>, it renders as if it is outside of the <nav>. The reason for this appears to be the float: right; CSS tag. However, I don't know how to fix this issue while still getting the effects of the tag.

https://jsfiddle.net/qwertious/dyrczuve/3/

HTML:

<nav>
    <div style="float: right;">
        <input type="number" value="1">
        <input type="submit">
    </div>
</nav>

CSS:

* {
    margin: 0;
    padding: 4px;
}
nav {
    background-color: #e0e0e0;
    padding-inline: 12.5%;
}

Answer 1

Floating elements require a clearing element to stop the parent from collapsing, but instead of float right, you could use display:flex;

* {
    margin: 0;
    padding: 4px;
}
nav > div {
    justify-content:flex-end;
    display:flex;
    background-color: #e0e0e0;
    padding-inline: 12.5%;
}

<nav>
    <div>
        <input type="number" value="1">
        <input type="submit">
    </div>
</nav>