Ingernirated

Да, влияет сильно. Вопрос про правильное употребление сильно зависит от сайта и того насколько сильно для вас важна фраза. Если сильно, то нужно написать ее в тайиле и дескрипшене страницы, а также в параграфах и других местах где употребляется семантика.

width: 40%;
max-width: 400px;

width: 40%; // ширина
max-width: 400px; // максимальная ширина

по идее это margin: 0 0 5% 0; для ".box"
30% * 3 блока = 90%, остальная 10% часть это отступ
10% / 2 отступа = 5% на один отступ

Это картинка.
<img src="images/cool_border.png">

Виньетка?

Скорее всего у вас получилась неудобная разметка, т.к. обычно контент имеет условно-фиксированное значения от родителей, можно сделать вот так:
https://codepen.io/anon/pen/OdKXpQ
Но это больше от безысходности, чем хорошая практика

Здравствуйте!
Установите плагин Query Monitor
https://wordpress.org/plugins/query-monitor/
Там вы на соответствующей странице сможете найти шаблон используемый главной страницей.
Обратите внимание на иерархию шаблонов - https://developer.wordpress.org/themes/basics/temp...
Обычно index.php, page.php, front-page.php

Простого решения нет, если нужно на чистом css то гуглите "masonry layout using flexbox" там много решений.

В данной ситуации проблема решается с помощью grid'ов https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Запретить выделение совсем

.menu {
  user-select: none;
}

либо сделать меню на флексах

.menu {
  display: flex;
  flex-direction: row;
}

либо тупо написать в одну строку

<a class="text">портфолио</a><a class="text">цены</a><a class="text">контакты</a>

Пробелы появляются между инлайновыми элементами.

Просто добавь вот такие правила.

.menu {
  user-select: none;
}

Главное помнить, что user-select: none; не следует прописывать для input и textarea, так как на маках в них невозможно будет печатать текст.

Я в своих проектах использую вот такой Stylus миксин

$selection-none()
    &
        -webkit-user-select none
        -moz-user-select none
        -ms-user-select none
        user-select none
    input
    textarea
        -moz-user-select all !important
        -webkit-user-select: all !important
        -ms-user-select: all !important
        user-select: all !important

https://jsfiddle.net/1odn3h58/2/

Вот так ?

const boxes = document.querySelectorAll('.box');

boxes.forEach((box, index) => box.addEventListener('click', function(e) {
  console.log(index + 1);
  this.style.backgroundColor = 'red';
}));

На вашем примере логика простая:
- Элемент должен быть первым
- Элемент должен иметь указанный класс bro

Вот так должно быть более понятно


Иными словами учитываются все элементы уровня, но свойства применяются если у элемента имеется указанный класс

Потому что первым элементом в потоке является H1, и по факту ваш первый bro, является вторым элементом. Оберните, например, ваши p.bro в div, и всё будет работать корректно.

используйте nth-of-type вместо nth-child

https://jsfiddle.net/3ser81q5/