Why do elements behave so strangely?

P

Pavel2020-05-13 13:52:48

css

Pavel, 2020-05-13 13:52:48

I started building a website!
and faced such problem

here is the code :

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Arseny, 2020-05-13
@Angel700

In bootstrap row, this is a line whose task is → to line up elements horizontally. For correct operation, it is necessary to use a grid inside it col-[количество колонок, базово от 1 до 12].
Therefore, solutions 2:
1. Remove rowfrom wrappers, leaving only container*.
2. Nest between content and row one div with class col-12*.
* - and in any case, remove negative margins. They will give you that other gift for.
But it's better to go to the documentation and see examples if you can't speak English. Edge → look for Russian-language documentation, it usually lags behind, but grids are one of the basic functions.

D

drawnofmymind, 2020-05-13
@drawnofmymind

remove all margins that have a "-" sign and don't use
why don't you use Column if you use bootstrap?