Sozdavan

Вы можете использовать appearanceсвойство CSS, чтобы изменить внешний вид стрелок на inputэлементе с typeчислом. Следующий CSS должен изменить цвет фона стрелок на прозрачный:

input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Обратите внимание, что это будет работать только для браузеров webkit (Chrome и Safari), и вам может потребоваться использовать префиксы для других браузеров. Кроме того, вы можете использовать background-color: transparentвместо того -webkit-appearance: none;, чтобы изменить цвет фона на прозрачный.

Чтобы создать адаптивный заголовок с разными отступами от краев страницы, вы можете использовать CSS для установки ширины и полей элемента заголовка. Вот пример того, как вы можете это сделать:

<header>
  <h1>My website</h1>
</header>

header {
  width: 90%;
  margin: 0 5%;
}

В этом примере элемент заголовка имеет ширину 90% от ширины области просмотра и поля 0 сверху и снизу и 5% слева и справа. Это заставит заголовок занимать 90% ширины экрана с отступом в 5% с каждой стороны. Вы также можете использовать медиа-запросы для изменения стиля заголовка при разных размерах экрана, например:

@media (min-width: 768px) {
  header {
    width: 80%;
    margin: 0 10%;
  }
}

Это применит новые стили, когда ширина экрана будет не менее 768 пикселей. Вы также можете использовать CSS Grid или Flexbox, чтобы сделать адаптивный заголовок с разными полями

P.S. Если учитесь - главное пытаться и делать. Упорство и труд - всё перетрут. А дизайн на вид норм

Вы можете использовать селектор CSS :first-child для выбора первого элемента в каждой строке и удаления левого поля. Например, вы можете использовать следующий CSS:

.tile {
  margin-left: 10px;
}

.tile:first-child {
  margin-left: 0;
}

Это удалит левое поле для первого элемента в каждой строке, независимо от того, сколько элементов находится в строке или насколько широк экран

or 

.tile:nth-child(n+1) {
  margin-left: 0;
}

В CSS можно использовать медиа-запросы для настройки макета веб-страницы в зависимости от размера экрана устройства. Используя правило media и указав значение min-width или max-width, вы можете применять к веб-странице разные стили в зависимости от размера экрана. Например, вы можете использовать следующий медиа-запрос для таргетинга на устройства с шириной экрана больше или равной 600 пикселям:

@media screen and (min-width: 600px) {
  /* styles for devices with screen width >= 600px */
}

Другой подход заключается в использовании JavaScript для определения типа устройства пользователя и последующего применения соответствующих стилей. Также можно использовать фреймворки или библиотеки, такие как Bootstrap, Foundation, Bulma и т. д., у них есть классы и функции адаптивного дизайна, которые могут помочь в этом вопросе. Также важно помнить, что во всех случаях необходимо учитывать удобство работы с пользователем. Рекомендуется использовать подход, ориентированный на мобильные устройства. Это означает, что сначала необходимо разработать макет для мобильных устройств, а затем постепенно улучшать его для больших экранов.