Dmmitry

потому что им нужен родитель

<div class="parent">
<div class="item">
</div>
  <div class="label">
    asdasdasd
  </div>
</div>

body {
  background: rgba(12, 77, 162, 0.07);
  
}
.parent {
  position: relative;
  width: 300px;
}
.item {
      padding: 40px 30px 30px;
  width: 250px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0px 0px 18px rgba(171, 171, 175, 0.45);
            position: relative;
            z-index: 9999;
            margin-right: 70px;
           
}
.label {
       position: absolute;
                top: 50%;
                margin-top: -15px;
                right: -70px;
                 height: 30px;
  
                border-radius: 15px;
                background-color: #fff;
                width: 80px;
             
                z-index: 1;
                display: flex;
                justify-content: center;
                align-items: center;
}

По ссылке много демо.
Предоставьте код с вашего сайта.

Зачетный сайт (1)
Вы хотите свой просмоторщик сделать или без разницы?

Мне кажется это дело вкуса.. я, например, не приветствую такой подход из-за лишнего js кода, который можно заменить парой div-блоков, но встречал довольно разные реализации.
Вот, например, в этой верстке эти блоки реализованы как раз таки описанным вами способом clip2net.com/s/3aZ4I6x

Ну во-первых блок "fluid content" шире чем ширина места, выделенного под него, поэтому он чисто физически не влезет туда clip2net.com/s/3ak0YKU

Во-вторых он выравненный по правой стороне (float: right) и поэтому опущен вниз на величину высоты сайдбара.

Для начала выставьте ему адекватную ширину, после, подымите вверх. Или же выравнивайте его по левой стороне. Также, можно присвоить одному из блоков position: absolute и выставить нужные отступы.

Автоматически меняло размер в зависимости от чего?
И код предоставьте.

Подключаю всегда так. На Сафари работает.

@font-face {
font-family: RobotoReg;
src: url(../fonts/Roboto-Regular.ttf);
}

Какой формат вашего шрифта?

Сафари поддерживает только OTF TTF SVG

Лучше использовать движок, потому что большая вероятность того, что в дальнейшем он вам понадобиться (если сайт будет статично написан на html+css).

Код, пожалуйста. Ванга сегодня не в духе.

Не знаю по поводу конкретно этого курса, так как просмотреть и оценить его времени нет. Но я бы вам рекомендовал изучать html/css с помощью сервиса htmlbook, там все детально и с примерами.

Это пробовали?

background: linear-gradient(to top, #fefcea, #f1da36);

@media screen and (max-device-width: 480px) {
       div {
            здесь свойства блока для мобильных устройств
       }
}

Вот я делал пример простейшего слайдера, может это поможет вам.
Подключаем библиотеку jquery и вот код:

<style type="text/css">
		#enter {display:none}
		.slide {border:1px solid grey; padding:20px; width:40px; margin:10px; display:none}
		.check {border:1px solid red; padding:10px; width:10px; margin:8px; display:inline-block;}
	</style>

	<div id="s1" class="slide">1</div>
	<div id="s2" class="slide">2</div>
	<div id="s3" class="slide">3</div>
	<div id="s4" class="slide">4</div>
	
	<div id="prev" class="check">&larr;</div>
	<div id="next" class="check">&rarr;</div>
	
	<script type="text/javascript">

		var count = 1;
			
		$(document).ready(function() {
			$('#s1').show();
		});

		$('#next').on('click', function(){
			$('#s' + count).hide();
			$('#s' + ++count).fadeIn();
			if(count == 5) { count = 1; $('#s1').fadeIn(); }
		});

		$('#prev').on('click', function(){
			$('#s' + count).hide();
			$('#s' + --count).fadeIn();
			if(count == 0) { count = 4; $('#s4').fadeIn(); }
		});
	
	</script>

А далее уже настраивайте под себя

Резиновая, адаптивная верстка, bootstrap