Виталий Першин

100% сходство PerfectPixel делать не стоит. Так как во-первых дизайн не всегда симметричен, иногда дизайнер располагает блоки на глаз и в данном случае нужно понимать, что это не фича. Во-вторых иногда чтобы исправить пару пикселей приходится навешивать не нужные отступы, обертки и т.д.. Сами эти пиксели ничего не изменят, но могут раздуть код, а в последствии еще и заставить дальше его кастылять.

Возник вопрос, а правильно ли я поступаю, что иногда вмешиваюсь во флексы со своими margin отступами? Например, 3 блока расположены друг от друга с помощью justify-content: space-between, но мне нужно чтоб один блок был чуть ближе к одному из блоков или дальше.

Если нужно, то почему бы и нет. В БЭМ для этого используют модификаторы и это очень облегчает жизнь.

Можно без js делать выборку по тегам:

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

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        if(slick.slideCount == nextSlide + 1) {
            // code...
        }
    });

Можно при помощи градиента и свойства box-decoration-break: clone;

Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на portfolio__card, но вы не учил того, что каждый слайд в слик слайдере имеет свои свойства, в том числе, для правильно работы он обнуляет margin. Правильнее всего добавлять обертку для каждого слайда, а уже внутри делать свои блоки как хотите:

<div class="container">
	<div class="card-slider">
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>

			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
	</div>
</div>

Не полностью разобрался как у них реализовано, но в основе лежит свойство mix-blend-mode
Написал небольшой пример:

Я так полагаю, поскольку вы добавили тег Bootstrap, у вас проблема в том что container ограничен по ширине.
Вам нужно добавить закрывающий тег, вставить ваш блок и затем снова открыть container:

</div> <!-- закрываем  container  -->
    <div class="decor-line"></div>  <!-- вставляем свой блок с нужными стилями  -->
<div class="container"> <!-- Снова открываем container  -->

Flex контейнер внутри которого блок с точками занимает все свободное пространство. При этом можно ему задать любые свойства и фон:

При помощи clip-path это делается просто и эффективно, а в случае отсутствия поддержки в каком-либо старом браузере, самое худшее что случится, будет просто кнопка без уголка:

С display: none; обратную анимацию вы не сделаете, а вот с visibility: hidden; и transition повторить это легко:

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

Может у вас стили через js формируются во время загрузки и нужно эти скрипты повесить так же на ресайз...

border: none;

Вы используете сетку Bootstrap в которой container имеет padding-left: 15px и padding-right: 15px;
Эти padding компенсируются отрицательными margin-left: -15px и margin-right: -15px; у контейнера row.
Обнулив container, но оставив row вы тем самым вынесли его на 15 пикселей в право за пределы страницы.

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

Не очень понятно какое поведение в итоге вам нужно так как не видна общая картинка, но попробуйте bottom: 420px; заменить на margin-top: -420px;

У вас не блок налазит, а блок в котором находиться ваша картинка имеет свойство overflow: hidden;

.tab-content > div {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

А сама картинка абсолютно позиционирована внутри него при этом она идет снизу вверх

.slider-div {
    width: 256px;
    height: 446px;
    background: url("https://i.ibb.co/2WSTRkX/phone-slider.jpg");
        background-size: auto;
    background-size: 100%;
    clear: both;
    position: relative;
    left: -900;
    bottom: 60px;
    border-radius: 17px;
}

Поэтому верх и обрезается, потому что он выходит за пределы блока со свойством overflow: hidden;

Нужно либо убрать overflow: hidden; либо позиционировать вашу картинку не абсолютно, чтобы она растягивала блок в котором находиться, либо задать минимальную высоту для блока который обрезает картинку

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

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


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

clip-path и calc



Генератор clip-path https://bennettfeely.com/clippy/