CODEWITHSUNDEEP
htmlcsscontainersoverlay
Yel Kizon
Yel Kizon

Reputation: 43

My css is not affecting my second <section> tag

Before I made this second section tag I have another section before it, that have this code. Here:

HTML

<div class="about-me-section">
<div class="about-me-overlay">
    <h1>Hi I'm Marielle,</h1>
    <p>A web developer and self-enthusiast</p>
</div>
</div>

CSS

.about-me-section {
background: url(https://images.unsplash.com/photo-1498622601663-8277ceda5cb6?auto=format&fit=crop&w=791&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about-me-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0a1725;
    opacity: .94;
    z-index: 0;
}

.about-me-overlay {
    flex: 1;
    margin: auto;
    color: white;
    text-align: center;
    z-index: 6;
}

.about-me-overlay p {
  font-size: 1.5rem;
}

Now, I'm designing my second section tag, when I'm adding padding, margin, height or width it won't display the changes I made in my css.

HTML

<section id="background-technologies">
<div class="techno-wrapper">
<h1>Services <hr class="header-style-bottom-2"></h1>
</div>
</section>

CSS

  #background-techonologies section {
  max-width: 100%;
  margin: 0;
  padding: 0 2em;
}

#background-technologies h1 {
  text-align: center;
}

#background-technologies .techno-wrapper {
  margin: 0;
  width: 100%;
}

Here's a screenshot of the display in my chrome dev tools link here

Upvotes: 1

Views: 102

Answers (1)

heyitsgeo
heyitsgeo

Reputation: 11

You have a spelling error in your css. Your section id in your html is “#background-technologies” however in your css it’s “#background-techonologies”.

Upvotes: 1

Related Questions