I want the main tag not to be affected by the margin

Question

I want the main tag not to be affected by the margin

Asked 3 years, 9 months ago

Viewed 44 times

-2

I’m trying to put a second background on my site using the main tag, but I wanted the background to stay next to the text on the sides
(without this empty space of margin, in the case of this space in pink in the image below)

^{click on the image to view it in its original size}

h1 {
  width: 50%;
  margin-left: 350px;
  font-size: 28;
}

body {
  font-size: 18;
  margin-top: 30px;
  font-family: 'Open Sans';
  line-height: 1.5;
  background: url(fundo.jpg) center;
  color: white;
}

p {
  margin-left: 250px;
  margin-right: 250px;
}

h3 {
  margin-left: 600px;
}

main {
  background: blue;
}

<!DOCTYPE>
<html lang='pt'>

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <title> All the Boeings AvianAir </title>
  <link rel="stylesheet" type="text/css" href="boeing.css">
</head>


<body>
  <h1>
    All the Boeings and how to differentiate each one
  </h1>
  <h3>
    Boeing 707
    <img src="">
  </h3>
  <main>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id justo risus. Cras aliquam arcu non mi elementum, tristique aliquam lectus volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec non
      venenatis ex. Morbi pulvinar sit amet eros quis pharetra. Curabitur dictum faucibus lacus. Pellentesque lacus dui, tempus sit amet iaculis sed, rhoncus et quam. Suspendisse id neque eleifend, molestie neque in, laoreet lorem. Nunc eu lorem sit amet
      neque cursus finibus eget sit amet arcu. Maecenas at quam laoreet, convallis lorem blandit, efficitur enim.
    </p>
  </main>
</body>

</html>

3 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Heitor Heitor Heitor • 31 points · Answer 1 · 2021-01-17T01:58:28+00:00

1

You put margin on the dial p. Instead of:

p {
    margin-left: 250px;
    margin-right: 250px;
}

Replace to:

p {
    margin: 0;
}

I withdrew as the other answer also speaks, but then I can’t leave the text in the middle of the screen as it was... could I leave the text like that and still make the background look like I want? https://imgur.com/a/GLFs26J (example of how it turned out)

– Math

2021/01/17 at 02:24
Yes! You would have to write inside the main selector block: display: block; /* o margin auto só funciona se o modo do display for block */ width: 400px; /*a largura que você deseja que texto ocupe*/ margin: auto; /* Para deixar no centro */

– Heitor Heitor Heitor

2021/01/18 at 04:44

by dfvc • **514** points · Answer 2 · 2021-01-17T14:28:25+00:00

Try changing the css of the element p for:

p {
  padding-left: 250px;
  padding-right: 250px;
}

by Diego • 25 points · Answer 3 · 2021-01-17T01:16:38+00:00

The problem apparently is in your tag p that’s causing this withdrawal that you’re saying. By removing the margin of this component in the CSS it already fits the entire screen.

Corrected CSS code:

h1 {
    width: 50%;
    margin-left: 350px;
    font-size: 28;
}

body {
    font-size: 18;
    margin-top: 30px;
    font-family: 'Open Sans';
    line-height: 1.5;
    background: url(fundo.jpg) center;
    color: white;
}
p {
    margin: 0;
}
h3 {
    margin-left: 600px;
}

main {
    background: blue;
}