Too much clickable space around checkbox – Blancer.com Tutorials and projects

I’m building a to-do list website and for some reason all the tasks created have too much space around the checkbox. screenshot of the tasks added.

I tried styling the checkbox to have 0 padding, 0 margin, changing the justify-content and align-items of the task but nothing seems to work. Here’s the html, relevant part of css and javascript:

<!DOCTYPE html>
<html>
    <head>
        <title>task-ify - by livia</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h2 id="website-title">task-ify</h2>
        </header>
        <div class="screen">
            <form>
                <p id="newtask">new task</p>
                <input type="text" id="task" maxlength="27">
                <button type="button" id="savebttn" onclick="saveTask()">save</button>
            </form>
            <div class="todofield">
                <nav>
                    <p>filters:</p>
                    <button type="button" id="filter" onclick="viewAll()">ALL</button>
                    <button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
                    <button type="button" id="filter" onclick="viewDone()">DONE</button>
                </nav>
                <div class="taskgallery" id="taskgallery">
                    <div class="taskview" id="taskview">
                    </div>
                </div>
            </div>
        </div>
        <footer><p>made by livia&copy;</p></footer>
        <script src="script.js"></script>
    </body>
</html>

.taskgallery{
    box-sizing: border-box;
    border-radius: 8px;
    border: 0.1em solid #49311d;
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 3em;
    padding: 20px;
}

.taskview{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 98%;
    height: 98%;
    gap: 1.5vw 3vw;
}

#task1{
    display: flex;
    flex-direction: row;
    width: 30%;
    height: 5%;
    align-content: center;
}

#task1 > label{
    margin: 0px 10px;
    border-radius: 20px;
    width: 95%;
    align-content: center;
    padding-left: 10px;
    font-size: 1.8vh;
    color: #0A0903;
    background-color: #feaf55;
}

input [type="checkbox"]{
    padding: 0 !important;
    margin: 0 !important;

}

function saveTask(){
    const newTask = document.getElementById('task');

    if(newTask.value != ''){
        const task = document.createElement('div');
        task.className = 'task';
        task.id = 'task1'

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';

        const label = document.createElement('label');
        label.textContent = newTask.value;
        
        //task.classList.add('to-do');

        checkbox.addEventListener('change', function() {
            if (this.checked) {
                label.style.textDecoration = 'line-through';
                task.classList.remove('to-do');
                task.classList.add('done'); 
            } else {
                label.style.textDecoration = 'none';  
                task.classList.remove('done');
                task.classList.add('to-do'); 
            }
        });

        task.appendChild(checkbox);
        task.appendChild(label);

        document.getElementById('taskview').appendChild(task);
        tasks.push(task);
        newTask.value = '';
    }
}