Почему ссылка на следующей строке, хотя есть место на этой?

Question

[Владимир Волохов]

(Bootstrap 4)



HTML:

<div class="container menu_div">
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu">Новости</a>
		</div>
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu">Обьявления</a>
		</div>
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu">Задания</a>
		</div>
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu">...</a>
		</div>
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu a_menu_admin">Панель ...</a>
		</div>
		<div class="p_menu user_button badge">
			<a href="#" class="a_menu a_menu_admin button_admin">Панель ...</a>
		</div>
	</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap');

	.a_menu {
		text-decoration: none;
		color: black;
		font-size: 22px;
	}
	.a_menu:hover {
		text-decoration: none;
		color: black;
	}

	.menu_div a {
		display: inline-block;
		margin-right: 42px;
	}

	* {
		font-family: 'Roboto', sans-serif;
	}
	.a_menu_admin {
		text-decoration: none;
		color: #DE5151;
		font-size: 22px;
	}
	.a_menu_admin:hover {
		text-decoration: none;
		color: #DE5151;
	}
	.a_menu .a_menu_admin {
            display: flex;
	}

Сколько я не пытался эту вторую "Панель" перенести в список к остальным, ничего не получалось.

UPD: Первоночально я думал, что проблема в бустрапе, но оказалось не в нем.

Answer 1

[Владимир Волохов]

Проблема оказалась все таки в бустрапе. А именно в контейнере. Контейнер должен был растягиваться по ширине монитора. А для этого нужен не container, а container-fluid.

Решение:
<div class="container-fluid"></div>