Margin property for one id works but not for the other ids

Question

Everything for the welcome-section id works. When I apply the same properties to the other id, project1, the margin property does not work at all. Please guide on what I am doing wrong.

#main {}

#project1 {
  background-color: rgba(235, 232, 223, 1);
  margin-top: 1000px;
  height: 2500px;
}

#welcome-section {
  background-color: rgba(214, 210, 197, 0.7);
  margin: 25px 25px 25px 25px;
  text-align: center;
  height: 50px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  vertical-align: middle;
  display: table-cell;
  width: 850px;
  font-size: 120%;
  font-weight: bold;
  color: ;
  border-style: dotted;
  border-color: blue;
  text-shadow: 2px 2px 5px powderblue;
}

<body id='main'>
  <header>
    <navbar id='nav-bar'></navbar><br>
    <h1 id='welcome-section'>
      How can I help your business grow?</h1>
  </header>
  <br>
  <projects id='projects'>
    <project1 id='project1'>
      <projectt id='prjctt'>Desalination in Balochistan</projectt>
      <proimg id='proimg'></proimg>
    </project1>
  </projects>
</body>

You can see it here:

https://codepen.io/wajieraja/pen/LYpJLqY

There is no `` element. But even with that, if I add the same CSS to that div it works fine https://jsfiddle.net/j08691/dz94x65u/ — j08691, May 14 '20 at 19:52
any new custom element is inline by default, you need to make it block for the height and margin to work — Temani Afif, May 14 '20 at 19:53
you need to add display: block; to your custom tags to be block and have their own margin/padding/height/width etc. — Muhammad Asadullah, May 14 '20 at 19:59

score 0 · Answer 1 · answered May 14 '20 at 19:56

0

add display:flex in your css

 #project1 {
  background-color: rgba(235, 232, 223, 1);
  margin-top: 1000px;
  height: 2500px;
  display:flex;
}

answered May 14 '20 at 19:56

SHUBHAM SINGH

371
3
11

why flex? why not block? – wajieraja May 14 '20 at 20:02
@wajieraja you can add either block or flex – SHUBHAM SINGH May 15 '20 at 19:16

Margin property for one id works but not for the other ids

1 Answers1