Hi there,

I filmed a video of my bug on this video - https://www.loom.com/share/8cf9a7d3ba9147f18de446bcd9996c90

​

However, for those who want the written description - here's a link what my containers look like- [EDIT: REMOVED SCREENSHOT LINK]

​

I have one hero section that has two main containers. A form container, and a list container(making a todo app) I've centered the section using flexbox on the body. However, my form container does not apply margin-top. As you can see, it's stuck to the top of the section hero.

​

Here's my Code

​

​

​

​

APP.JS

import React, {useState} from "react"


function App() {

  const [name, setName] = useState("")
  const [list, setList] = useState([])
  const [isEditing, setIsEditing] = useState(false)
  const [editId, setEditId] = useState("")


  const handleSubmit = () =>{

  }


  return (
    <section className="hero">
      <form className="form">
          <div className="form-container">
              <input type="text" />
              <button></button>
            </div>       
      </form>

      <div className="list-items">
      </div>
    </section>
  );
}

export default App;

INDEX.CSS

:root{

--blue: #003049; --red: #D62828; --orange: #F77F00; --yellow: #FCBF49; --tan: #EAE2B7; --white: #F5F5F5; }

body {

margin: 0; padding: 0; height: 100vh; background-color: var(--blue); display: flex; justify-content: center;

}

section.hero { background-color:white; height: 15rem; width: 40rem; border-radius: 2rem; margin-top: 25%; padding: 0; }

form { height: 2rem;

padding: 0; display: flex; justify-content: center; border: 1px solid red; } .form-container {

display: flex; justify-content: center;

}