Сергей Романенко

После многих лет работы в вебдев-е, я сделал вывод, для что для готовых быстрых (в плане изготовления) и готовых интерфейсов по типу админок, Bootstrap лучший выбор. Но если надо что то уникальное (кастомное), особенно для клиентской части сайта, то тут нужно либо самому писать с нуля на чистом CSS либо взять новомодный Tailwind CSS.

В своих проектах, для админки я юзаю Bootstrap а для клиентской части пишу на Tailwind CSS

для .new-todo добавьте

.new-todo {
    overflow-wrap: break-word;
}

https://jsfiddle.net/0pvqt4f8/

Потому что ID с одним названием должен быть только один!

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

htmlbook.ru/html/attr/id

Если с классами то вот так

HTML

<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>

CSS

.class {
  color: red;
}

JS

var els = document.querySelectorAll('.item');
[].forEach.call(els, function(el, i, els) {
     el.classList.add("class");
});

https://codepen.io/Awilum/pen/OJbjRwz

HTML
<input type="file" class="custom-file-input">

CSS

.custom-file-input {
  color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Файл не выбран';
  color: black;
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
}

https://codepen.io/Awilum/pen/WNoExOG

Вот так можно сделать и оно будет работать на любой ширине экрана.

word-spacing: 100vw

Я так понимаю она у вас просто съехала вниз потому что видимо блок с пунктами меню у вас растянулся на 100% или же она у вас в отдельном контейнере просто находится и выводится как следующий ряд, а не колонка, сложно оценить проблему точно по скриншоту.

и странный способ позиционирования у вас с помощью margin.
делайте тогда уже вот так:

.numbergleba {
  position: absolute;
  left: VALUE;
  top: VALUE;
  right: VALUE;
  bottom: VALUE;
}

Смотрите: https://developer.mozilla.org/ru/docs/Web/CSS/position