Кнопка в элементе формы расположена неправильно ⇐ CSS

[Anonymous]

Привет, я новичок и пытаюсь позиционировать

Код: Выделить всё

button

that sits inside a

Код: Выделить всё

form

element on the bottom right of a container, but not able to do so. Please advise. Thank you.
Whether using the

Код: Выделить всё

float:right;

or

Код: Выделить всё

position: absolute;

, the button is being taken out of the container(from my understanding from the dev tool on Google Chrome).

HTML code

Код: Выделить всё

Meme Generator
Fill out the form to start creating memes!

Image URL


Text On Top


Text On Bottom


Add Meme

CSS code

Код: Выделить всё

/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}

/* Input buttons don't inherit font property */
/* Inherit fonts for inputs and buttons */
input, button {
font: inherit;
}

/* VARIABLES */

:root {
--spacing: 1rem;
}

/* GENERAL STYLE - MOBILE FIRST*/

body {
font-family: 'Roboto', Courier, monospace;
}

.form-container {
padding: var(--spacing);
background-color: rgba(245, 221, 194, 0.75);
min-width: 100%;
}

.form-container h1,
.form-container p {
text-align: center;
}

form {
position: relative;
}

form label {
display: block;
margin-top: var(--spacing);
}

label input {
display: block;
min-width: 100%;
}

form button {
margin-top: var(--spacing);
padding-left: var(--spacing);
padding-right: var(--spacing);

/* when setting absolute, it's being taken out of the .form-container */
/* position: absolute; */
}

Источник: https://stackoverflow.com/questions/781 ... -correctly