Spend hours on this and cannot figure why this is the case. My page just will not scroll all the way to the left. like this:
I think this has to do with using justify-content: center; in the css body tag. When I set this to justify-content: start; I can scroll to the left, but I want to center my content.
Also, setting position: absolute to the css body tag would also fix the problem. But I don't know if I should do that.
Here are my code: Html:
<body>
<div class="mainAppContainer">
<div class="project">
<div class="todo">
</div>
<form id="todoForm">
<label for="title">
Title:
<input type="text" id="title" name="title">
</label>
<label for="description">
Description:
<textarea name="description" id="description" cols="30" rows="10"></textarea>
</label>
<label for="dueDate">
Due Date:
<input type="date" id="dueDate" name="dueDate">
</label>
<label for="priority">
Priority:
<select name="priority" id="priority">
<option value="High">
<div class="block"></div>
High
</option>
<option value="Mid">
<div class="block"></div>
Mid
</option>
<option value="Low">
<div class="block"></div>
Low
</option>
</select>
</label>
<button>Add</button>
</form>
<button id="addTodoButton">+Todo</button>
</div>
<button id="addProjectButton">+Project</button>
<button id="addProjectButton">+Project</button>
<button id="addProjectButton">+Project</button>
</div>
and css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.mainAppContainer {
background-color: white;
min-height: 1000px;
width: auto;
border-radius: 10px;
padding: 20px;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 350px;
grid-gap: 20px;
}
#addProjectButton {
background-color: rgb(162, 232, 255);
height: 50px;
width: 350px;
border: none;
border-radius: 10px;
font-size: 1.2rem;
}
.project {
box-sizing: border-box;
background-color: rgb(162, 232, 255);
height: 90%;
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 10px;
}
