Почему отступ CSS такой большой?

Question

[Дмитрий]

Здравствуйте, вот CSS блока

#player{
			width:70%;
			height:70%;
			border-radius: 10px;
			background-color: edeef0;
			margin-bottom: 2px;
			margin-right: 0;
			display: flex;
		}

я отключил отступ справа, но на сайте он занимает 100% страницы:


Как сделать нормальный отступ?

Answer 1

[Александр Епихин]

Синяя область у вас это непосредственно сам элемент, который занимает 70% ширины, а оранжевая область это оставшиеся 30%. Это не margin-right

Comments

[Дмитрий]

но так же туда не влезает такой элемент:

#chat{
			width: 20%; 
			height:5%; 
			float:right;
			border-radius: 10px;
			background-color: edeef0;
		}

[Александр Епихин]

Он может не влезать по другой причине. Приведите пожалуйста ссылку на ваш код оформленный в codepen.io и тогда можно точнее скачать в чем проблема.
P.S. float для создания раскладки не стоит использовать. Лучше flex или grid

[Дмитрий]

https://codepen.io/mrkarton/pen/xxGOdBx
P.S. не знаком с codepen

[Александр Епихин]

В вашем примере нет html #chat. Я так полагаю он находится рядом с #player.
Для того чтобы #chat встал рядом с #player, последнему необходимо прописать float:left.
Я вам настоятельно рекомендую отказаться (если нет причин так не делать) от float. В пользу вещей которые были специально созданы для этого.

[Дмитрий]

Спасибо за ответ и совет.
Float это временная мера. Я не являюсь Front-End разработчиком, но за неимением такового в команде, вынужден сделать примерный макет сайта, что бы можно было бы нормально работать.