Не могу передвинуть div с помощью flex. Как????

Question

[Sl1n]

Кароче ниже есть код. Суть в том что я хотел передвинуть div, а flex не работает. Не хочу через transform это делать. Еще почему то у div нельзя убрать margin
HTML

<div class="info_about_us">
				<h2 class="title_about_us">
					ABOUT US
				</h2>
				<p class="text_about_us">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio hic, consequuntur et quaerat! Asperiores hic molestias enim pariatur neque cupiditate, maxime, nihil. Accusamus, ratione placeat harum impedit, dolorum repudiandae perferendis.
					A, atque tenetur reiciendis quod eveniet fuga omnis, recusandae ullam eius id rem, unde. Ipsum, vero, similique. Eum repellat, reprehenderit adipisci quis, rerum architecto, nulla necessitatibus ullam distinctio nesciunt itaque.
				</p>

				<form action="" class="read_more">
					<input type="button" class="button_read_more">
				</form>
			</div>

CSS

.info_about_us {
	display: flex;
	justify-content: end;
	width: 500px;
	margin: 0;
}

.title_about_us {
	margin: 0;
}

.text_about_us {
	margin: 0;
}

.read_more {
	margin: 0;
}

.button_resd_more {
	margin: 0;
}

Answer 1

[Александр Варлаков]

Ты наверное хотел выровнять контент по правому краю?
Если да, то justify-content: flex-end;

убрать margin и padding

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

потому как margin у тебя прекрасно работает:
https://jsfiddle.net/khgb2pw0/14/

Answer 2

[Legal Adviser]

Ваш div флексовый контейнер для h2 + p + form. По сему и не двигается никуда.
Если ваш div находится внутри другого div, то родитель должен быть флексом и тогда можно ваш див распределить по центру или по бокам, если он один. Почитайте про флексы.

Comments

[Sl1n]

Создал wrapper для этого div, но wrapper зачем то создает margin, который не дает перемещаться с помощью flex
HTML

<div class="wrapper_info_about_us">
					<div class="info_about_us">
						<h2 class="title_about_us">
							ABOUT US
						</h2>
						<p class="text_about_us">
							Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio hic, consequuntur et quaerat! Asperiores hic molestias enim pariatur neque cupiditate, maxime, nihil. Accusamus, ratione placeat harum impedit, dolorum repudiandae perferendis.
							A, atque tenetur reiciendis quod eveniet fuga omnis, recusandae ullam eius id rem, unde. Ipsum, vero, similique. Eum repellat, reprehenderit adipisci quis, rerum architecto, nulla necessitatibus ullam distinctio nesciunt itaque.
						</p>

						<form action="" class="read_more">
							<input type="button" class="button_read_more">
						</form>
					</div>
				</div>

CSS

.info_about_us {
	width: 500px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	align-items: center;

}

.wrapper_info_about_us {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 500px;
	margin: 0;
	padding: 0;
}

Answer 3

[Владислав Лысков]

justify-content: flex-end;