I can not set Padding or Margins in CSS

Question

I am making a portfolio web site I got a error,

That I cant set a padding-top or a margine top to my text here its look like:

Screen look

developer tool look

but i want to get it like this: What I wanna get

#skill {
  overflow: hidden;
  width: 100vw;
  max-width: 65rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  padding-top: 3rem;
}

.skillTitle {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-top: 3rem;
  /* Add padding-top here */
}

.skillDescription {
  padding-top: 1rem;
  margin-top: 1rem;
  margin-top: 3rem;
  color: darkgrey;
  font-weight: 100;
  font-size: 1rem;
  font-style: italic;
  max-width: 50rem;
  padding: 0 2rem;
}

<section id="skill">
  <span class="skillTitle">What I do</span> <br />
  <span class="skillDescription">I am a passionate web developer and UI/UX designer, dedicated to creating intuitive,
    user-friendly interfaces and seamless web experiences. My expertise lies in crafting visually
    appealing websites with a focus on functionality and accessibility.</span
  >
  <div class="skillBars"></div>
</section>

I wanna know why this happening and how I fix his this error!

Answer 1

You are just overriding your style. Check on documentation of padding to see how it works. Basically when doing padding: 0 2rem; you are reseting the top padding. For margin-top you are just setting twice and the last one is the only one that gets painted.

.skillDescription {
    padding-top: 1rem; <- this gets override by last line ------
    margin-top: 1rem; <- this gets override by next line       |
    margin-top: 3rem;                                          |
    color: darkgrey;                                           |
    font-weight: 100;                                          |
    font-size: 1rem;                                           |
    font-style: italic;                                        |
    max-width: 50rem;                                          |
    padding: 0 2rem;  < ---------------------------------------
}

To solve it, you can just do:

.skillDescription {
    margin-top: 3rem;
    color: darkgrey;
    font-weight: 100;
    font-size: 1rem;
    font-style: italic;
    max-width: 50rem;
    padding: 1rem 2rem;
}

You can change the padding first value if you want more padding in top-bottom.