Задать вопрос
Angel700
@Angel700
новичок в программирований!

Почему элементы ведут себя так странно?

я начал верстать сайт!
и столкнулся с такой проблемой
5ebbd0c03965a516265033.png
вот код :
<!DOCTYPE html>
<html>
<head>
	<title>23 Febraury</title>
	<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Questrial&display=swap" rel="stylesheet">
	<style type="text/css">
		.sale {
			background: url("../web/img/sale.png") no-repeat center;
		}
		.text1 {
			margin-top: 45px;
			margin-left: 304px;
			font-size: 11px;
			color: #ecd7c7;
			font-family: 'Questrial', sans-serif;
		}
		.text2 {
			margin-top: 53px;
			font-size: 23px;
			color: #ecd7c7;

		}
		.text3 {
			margin-top: 84px;
			font-size: 11px;
			color: #ecd7c7;

		}
		.text4 {
			margin-top: 112px;
			font-size: 11px;
			color: #ecd7c7;
		}
		.button {
			margin-top: 195px;
			background-color: #131f2d;
                        margin-left: -118px;
			color: #ecd7c7;
			font-size: 11px;
			width: 202px;
			height: 46px;
		}
		.more {
			margin-left: 30px;
			margin-top: 10px;
			font-size: 20px;
			border: 0;
			border-radius: 1px;
			border-color: #ecd7c7;
		}
		.flower {
			margin-left: -230px;
			margin-top: 180px;
			margin-bottom: 53px;
		}
	</style>
	<link rel="stylesheet" href="bootstrap.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
	<div class="sale">
		<div class="container">
			<div class="row">
				<p class="text1">в преддверии 23 февраля</p><br>
				<p class="text2">СКИДКА ДО 16%</p><br>
				<p class="text3">на весь мужской ассортимент</p><br>
				<p class="text4">всем мужчинам,<br>оформившим заказ<br>в этот период,<br>МЫ ДАРИМ ПОДАРКИ!</p><br>
				<button class="button" href="google.com">ВЫБРАТЬ ДУХИ <span class="more"> > </span></button><br>
				<img class="flower" src="Untitled.png">
			</div>
		</div>
	</div>
</body>
</html>
  • Вопрос задан
  • 68 просмотров
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

Поэтому решения 2:
1. Убрать row из оберток, оставив только container*.
2. Вложить между контентом и row один див с классом col-12*.

* — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

Но лучше пойти в документацию и посмотреть примеры, если не можешь в английский. Край → поискать русскоязычную документацию, она обычно отстает, но сетки это из базовых функций.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@drawnofmymind
все марджины у которых знак "-" убери и не используй
почему не используешь Column если используешь bootstrap?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽
Data Directs Тель-Авив
от 350 000 ₽