* { box-sizing: border-box; } html, body { background-color: #eee; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style-type: none; } .center { align-self: center; } .flow-right { display: flex; justify-content: space-around; } .container { max-width: 800px; margin: 0 auto; padding: 10px; display: flex; flex-direction: column; background-color: white; height: 100vh; } .title, .controls, .button { flex: none; } .button { padding: 10px 20px; } .todo-list { flex: 1 1 0; margin-top: 20px; padding: 20px; overflow-y: auto; } .todo-delete { margin: 10px; } .todo-checkbox { margin: 10px; } .todo-container { padding: 20px; border-bottom: 1px solid #333; } .todo-container:first-of-type { border-top: 1px solid #333; }