Элемент поплавка сдвинут с края

Ожидаемое поведение: .header__main .left-col должен работать как .header__bar .left-col. Он должен плотно прилегать к краю

Проблема: .left-col не работает должным образом во второй строке с панелью поиска и девизом

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel = "stylesheet"/>
<div class = "header__bar">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">
        <div class = "contact">
          <span class = "contact__phone">8 (800) 000-00-00</span>
          <span class = "contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "blog">
          <a href = "#">
            <span class = "blog__img"></span>
            <span class = "blog__description">Item</span>
          </a>
        </div>

        <div class = "youtube">
          <a href = "#">
            <span class = "youtube__img"></span>
            <span class = "youtube__description">Item</span>
          </a>
        </div>

        <div class = "live">
          <a href = "#">
            <span class = "live__img"></span>
            <span class = "live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class = "header__main">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">

        <span class = "motto">Motto</span>

        <div class = "search">
          <form class = "search__form" action = "/" method = "get" role = "search">
            <input type = "text" placeholder = "Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "user">
          <a href = "#">
            <span class = "user__img"></span>
            <span class = "user__name">John</span>
          </a>
        </div>

        <div class = "cart">
          <a href = "#">
            <span class = "cart__img"></span>
            <span class = "cart__description">Cart: <span id = "cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->
html css css-float
31.05.2018 22:04
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
55
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас установлен left на .left-col, который не будет применяться, поскольку у вас нет набора position. Чтобы исправить это, вам нужно дать как .left-col, так и .right-col правило position: absolute:

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  position: absolute;
  left: 0;
  float: left;
}

.right-col {
  position: absolute;
  right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  line-height: 40px;
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel = "stylesheet"/>
<div class = "header__bar">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">
        <div class = "contact">
          <span class = "contact__phone">8 (800) 000-00-00</span>
          <span class = "contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "blog">
          <a href = "#">
            <span class = "blog__img"></span>
            <span class = "blog__description">Item</span>
          </a>
        </div>

        <div class = "youtube">
          <a href = "#">
            <span class = "youtube__img"></span>
            <span class = "youtube__description">Item</span>
          </a>
        </div>

        <div class = "live">
          <a href = "#">
            <span class = "live__img"></span>
            <span class = "live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class = "header__main">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">

        <span class = "motto">Motto</span>

        <div class = "search">
          <form class = "search__form" action = "/" method = "get" role = "search">
            <input type = "text" placeholder = "Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "user">
          <a href = "#">
            <span class = "user__img"></span>
            <span class = "user__name">John</span>
          </a>
        </div>

        <div class = "cart">
          <a href = "#">
            <span class = "cart__img"></span>
            <span class = "cart__description">Cart: <span id = "cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

Извините, но я не это имел в виду. Я забыл удалить те

— Ann Pavlov 31.05.2018 22:43

Что вы тогда ищете? Это приводит к тому, что рассматриваемый элемент смещается с левой стороны, что, похоже, именно то, о чем вы просили?

— Obsidian Age 31.05.2018 23:00
31.05.2018 22:10
Ответ принят как подходящий

Как я вижу - ожидаемый height для header__bar равен 40px, но у вас есть 42px. Итак, ваш ребенок div больше, чем его parent (это причина ваших проблем).

См. Код ниже - места, требующие изменения, я пометил комментариями.

После фрагмента кода вы найдете ссылки на полезные статьи.

/* LAYOUT */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.container {
  display: block;
  position: relative;
}

.left-col {
  // left: 0;
  float: left;
}

.right-col {
  // right: 0;
  float: right;
}

.row::after {
  content: " ";
  clear: both;
  display: table;
}

/* nav */

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}


/* HEADER */
/* header__bar */

.header__bar {
  background-color: #e5e5e5;
  height: 40px;
}

.contact,
.blog,
.youtube,
.live {
  display: inline-block;
  position: relative;
  // line-height: 40px;
  vertical-align: middle; // Add this
}

.blog,
.youtube,
.live {
  margin-left: 36px;
}

.blog__description,
.youtube__description,
.live__description,
.contact__phone {
	line-height: 40px; // Add this
}

.blog__description,
.youtube__description,
.live__description {
  font-size: 14px;
}

.contact__phone {
  font-size: 18px;
}

.contact__description {
  font-size: 12px;
}


/* header__main */
.header__main {
  height: 86px;
}

.motto,
.search,
.user,
.cart {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 86px;
}

.motto {
  font-family: "Kristi", cursive;
}


/* header__nav */
.header__nav {
  background-color: #f8f8f8;
}

@media only screen and (min-width: 1200px) {
  .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
  }
}
<link href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel = "stylesheet"/>
<div class = "header__bar">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">
        <div class = "contact">
          <span class = "contact__phone">8 (800) 000-00-00</span>
          <span class = "contact__description">Item</span>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "blog">
          <a href = "#">
            <span class = "blog__img"></span>
            <span class = "blog__description">Item</span>
          </a>
        </div>

        <div class = "youtube">
          <a href = "#">
            <span class = "youtube__img"></span>
            <span class = "youtube__description">Item</span>
          </a>
        </div>

        <div class = "live">
          <a href = "#">
            <span class = "live__img"></span>
            <span class = "live__description">Item</span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__bar -->

<div class = "header__main">
  <div class = "container">
    <div class = "row">
      <div class = "left-col">

        <span class = "motto">Motto</span>

        <div class = "search">
          <form class = "search__form" action = "/" method = "get" role = "search">
            <input type = "text" placeholder = "Search" />
            <button>Search</button>
          </form>
        </div>
      </div>
      <!-- .left-col -->

      <div class = "right-col">
        <div class = "user">
          <a href = "#">
            <span class = "user__img"></span>
            <span class = "user__name">John</span>
          </a>
        </div>

        <div class = "cart">
          <a href = "#">
            <span class = "cart__img"></span>
            <span class = "cart__description">Cart: <span id = "cart__quantity"></span></span>
          </a>
        </div>
      </div>
      <!-- .right-col -->
    </div>
    <!-- .row -->
  </div>
  <!-- .container -->
</div>
<!-- .header__main -->

Статьи

31.05.2018 22:41

Другие вопросы по теме

Миксины Sass: проблемы с translateX и translateY
Отрисовка флажка Gravity Form в Mozilla
Предотвращение толкания брата или сестры с помощью гибкости
Фоновое изображение работает некорректно?
Поддерживает ли Firefox v42 + CSS Grid?
Какие версии браузеров Firefox поддерживают Bootstrap?
Полимер 2, изменить CSS в пользовательском элементе из родительского
Bx-слайдер меняет направление через некоторое время
Невозможно установить p по вертикали
ScrollTop альтернатива для использования с телом?

Похожие вопросы

Разделение переменной Javascript на таблицу html
Переменная сеанса не используется встроенным PHP
Назначьте части json (в настоящее время в виде строки) переменным в JavaScript
Предотвращение толкания брата или сестры с помощью гибкости
Использование% S вне Sprintf в PHP
Вертикальное выравнивание HTML-содержимого Div
Помощь с объединением jquery в переменную js для условного вывода
JSX внутри Javascript внутри JSX
Ввод индекса данных в код Javascript
Фоновое изображение работает некорректно?