Style does not change anything else than the color CSS

I’m first making the static html design and css for my Todo list app and then passing them into react components.

I can’t figure why does the span in the li doesn’t move to the right, but after trying deleting things and figuring out what works and what doesn’t work i found that the li css doesn’t change anything more than the color, so if for example i tried changing the line height or height nothing changed and thaught that the whole style wasn’t working, but the color does work but everything else doesn’t. Is there some style that’s blocking the ability to change sizes and placement of things?

Here is the app.js:

import React, { useState } from "react";
import "./App.css";
import axios from "axios";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";

function App() {
  return (
    <>
      <div className="backgound">
        <div className="wrapper">
          <header>Todo app MERN</header>
          <div className="inputField">
            <input type="text" placeholder="Add your new task"></input>
            <button>
              <FontAwesomeIcon icon={faPlus} />
            </button>
          </div>
          <ul className="todoList">
            <li>
              Do something
              <span>
                <FontAwesomeIcon icon={faTrash} />
              </span>
            </li>
            <li>
              Buy something
              <span>
                <FontAwesomeIcon icon={faTrash} />
              </span>
            </li>
            <li>
              Learn something
              <span>
                <FontAwesomeIcon icon={faTrash} />
              </span>
            </li>
          </ul>
          <div class="footer">
            <span> You have 3 pending tasks</span>
            <button>Clear</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

And here is the css, the two styles that are causing me problems are .todoList li and .todoList li span:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

::selection {
  color: #ffff;
  background: rgb(142, 73, 232);
}

body {
  width: 100%;
  height: 100vh;
  padding: 10px;
  background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}

.wrapper {
  background: #fff;
  max-width: 400px;
  width: 100%;
  margin: 120px auto;
  padding: 25px;
  border-radius: 5px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}

.wrapper header {
  font-size: 30px;
  font-weight: 600;
}

.wrapper .inputField {
  margin: 20px 0;
  width: 100%;
  display: flex;
  height: 45px;
}

.inputField input {
  width: 85%;
  height: 100%;
  outline: none;
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 17px;
  padding-left: 15px;
  transition: all 0.3s ease;
}

.inputField input:focus {
  border-color: #8E49E8;
}

.inputField button {
  width: 50px;
  height: 100%;
  border: none;
  color: #fff;
  margin-left: 5px;
  font-size: 21px;
  outline: none;
  background: #8E49E8;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}

.inputField button:hover,
.footer button:hover {
  background: #721ce3;
}

.inputField button.active {
  opacity: 1;
  pointer-events: auto;
}

.wrapper .todoList {
  max-height: 250px;
  overflow-y: auto;
}

.todoList li {
  list-style: none;
  height: 45 px;
  line-height: 45 px;
  position: relative;
  background: #f2f2f2;
  border-radius: 3px;
  margin-bottom: 8 px;
  padding: 0 15 px;
}

.todoList li span {
  position: absolute;
  right: 0 px;
  color: #e74c3c;
}

.wrapper .footer {
  display: flex;
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.footer button {
  padding: 6px 10px;
  border-radius: 3px;
  border: none;
  outline: none;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  margin-left: 5px;
  background: #8E49E8;
  cursor: pointer;
  user-select: none;
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
}

.footer button.active {
  opacity: 1;
  pointer-events: auto;
}

>Solution :

You should not add spaces before "px" in your CSS code. height: 45 px; should be height: 45px;