ReActor Дмитрий Вершанский

либо просто поставьте color: #444; +/-

Сделайте для начала reset дефолтных отступов

* {
   padding: 0;
   margin: 0;
}

А также проверьте наличие мета тега viewport в head

<meta name="viewport" content="width=device-width, min-scalable=1, initial-scale=1.0">

Рекоммендую новую технологию GRID, поддержка браузеров уже на высокос уровне, вот кстати довольно хороший урок по основам Grid CSS https://youtu.be/agmgl-ElC8A

задайте вашему div фиксированные размеры, и всем img width: 100%

1. jpg2000 ( он же jpg2)
2. webp

код дайте свой https://jsfiddle.net/

Вам нужна функция clip-path() в css, с ее помощью в параметрах задаете любой геометрический объект-маску и тем самым происходит вычитание фрагментов

Вы наверное оговорились: Ни selector, а select - элемент-контейнер html выпадающего списка option

Индексация запрещается на что-либо и/или разрешается в файле robots.txt специальной директивой

к Примеру:

User-agent: *
Disallow: /user/pass/

User-agent: Googleboth
Allow: /

Подобная запись запрещает всем поисковым алгоритмам кроме гугловского индексировать (посещать) заданную в качестве исключения директорию

jsfiddle.net/agusesetiyono/r544F/1/light

Ну или банальный подход в лоб:

1. Два div'а разной ширины (width) под этим заголовком у которых border-top: solid 2px #0000ff;

2. Два элемента hr опять же с измененным width и позиционированием

Пожалуйста

.news__content {
    width: calc(960px - 50px);
    position: absolute;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
  }

А как же
.grid {
display: grid;
grid-template-columns: repeat(autofill, minmax(320px, 1fr));
}

И медиа-запросы не понадобятся

Здравствуйте! Атрибут tittle будучи универсальным атрибутом (относится к такому классу атрибутов) - не может по определению являться следствием ошибки при валидации кода. А так да - его наличие это вариант для считывающих голосовых устройств (приложений) с целью предоставления контента для слабовидящих, а также если "загоняться" - можно отнести это к разряду усиления семантического ядра.

Здравствуйте! Вот пожалуйста (при подключенном bootstrap)

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3">
      <div class="avatarBlock">
        <form>
          <input type="checkbox" name="absolute" value=""/>
        </form>
      </div>
    </div>
    <div class="col-12 col-md-8">
      <span>ф.и.о</span>
      <input type="text" name="" value=""/>
      <span>Предмет</span>
      <input type="text" name="" value="" placeholder="Русский и язык литература"/>
      <input type="checkbox" name="" value=""/>
      <span class="teacher">Классный руководитель</span>
    </div>
  </div>
</div>

css:

.avatarBlock {
  width: 150px;
  height: 200px;
  background: #ccc;
  border-radius: 5px;
  position: relative;
}

input[name="absolute"] {
  position: absolute;
  bottom: 5px;
}

input[type="checkbox"] {
  display: block;
}

span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

input[type="text"] {
  width: 350px;
  border-radius: 3px;
  border: solid 1px #bbb;
  outline: none;
  padding: 10px;
}

.teacher {
  text-transform: none;
  font-weight: 100;
}