Vlad_P

Да, добавить margin для input Хотя я бы предложил сделать fieldset grid - можно б было не меняя хтмл кода выровнять поля

ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?

body, а не .body

function profile() {
        let profile = document.querySelector(".header__authorization");
        profile.addEventListener('click', function(e){
            profile.classList.add('authorization')
        })
        
        document.addEventListener('click', function(e){
          if (profile.classList.contains("authorization") && !e.target.closest('.header__authorization')) {
            profile.classList.remove('authorization')
          }
        })
    }
profile();

На самом деле там не применяются стили на странице(фон). Думаю это потому, что файл стилей не подключен

Так подставьте вместо label - ссылку. ну и задайте ей display: inline-block

#noTableBorder button {
  left: 0; 
  margin-left: 0;
  transform: none;
  display:  block;
}

Не очень понятно, в чем проблема, кружки, вертикальная линия?

Скорей всего вам надо установить box-sizing: border-box

.text img {
  max-width: 100%;
  max-height: 100%
  object-position: center center;
  object-fit: cover
}

Посл. правило можно поменять на contain

селектор > обозначает прямых потомков. Можно конечно написать кучу правил для исключения каждого контейнера. но это так, глупости. тогда уж логичней всем исключаемым контейнерам добавлять 1 класс

#your-container > p {border: 1px dashed #000;}

#your-container p {border: 1px dashed #000;}

Вы для .item строго задаете ширину. вот она и остается неизменной. Если хотите ограничить ширину - пишите max-width

Думаю, просто запускается локально, а путь указан из корня

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

Здравствуйте, тут проще всего использовать grid. На flex же нужно сделать обертку для этих блоков http://joxi.ru/GrqdQzTGdPBqAz

Поставил height: auto и вписал в него текст. все видно

http://joxi.ru/MAj7vGukG7jWre

6 часов назад, npofopr сказал:

Для картинки плюсом использовать object-fit. 

А текст, обрезать с помощью js\php или с помощью css свойства line-clamp

Да да. line-clamp хватит вполне. и мин. размеры картинки следует ограничить ну и object-fit  к ней

Сделайте контейнер relative для тэга img, чтобы совпадал по размерам с изображением. В нем, помимо изображения абсолютно спозиц. див с left:0, right: 0, top:0, bottom:0. и в нем уже делайте что угодно. примерно так

div (relative)

   img

  div(absolute)

     ваш контент......

 <div class="header">
  <img src="" alt="">
  <p></p>
 </div>

 <style>
  .header {display: flex;align-items: center;}
  .header img {flex-shrink: 0;margin-right: 15px;}
 </style>

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

P.S. Насчет мешанины могу подсказать - присмотритесь ко второму скрину. Да и вопрос почитайте - проблема с добавлением отступов. а в коде их нет

Посмотрите, как устроена сетка бутстрапа, или любого др. фреймоворка.  У них описано лучше, чем я сумею, да и с кучей примеров

Можно так попробовать https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

В grid есть свойство, можно и без того скрипта попробовать. Хотя с ним проще всего)