Search code examples
htmlcssbackground-color

I can't change the background color of the html sections

I am having some issues to add a background color in the 3 sections created in html. Could you please have a look and let me know what I am doing wrong with the coding? I can only see the background color when I write in html style="background-color:whatever color". Looks like the CSS is not applying the changes I am trying over and over.

* {
  margin: 0px;
  padding: 0px;
}

.container {
  margin: auto;
  width: 80%;
  overflow: hidden;
}

header {
  border-bottom: 1px solid green;
  background-color: #e7e7e7;
}

#logo {
  float: left;
  margin-top: 20px;
}

nav {
  float: right;
  margin-top: 20px;
}

nav li {
  float: left;
  display: inline;
  list-decoration: none;
  padding: 20px 20px 20px 20px;
}

nav li a {
  color: #333333;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}

--------- #firstpart {
  margin-top: 40px;
  height: 300px;
  background-color: fuchsia;
}

.cajaslider {
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
  border: 1px solid navy;
  height: 400px;
  width: 55%;
}

#twitter {
  padding-top: 5px;
  margin-left: 40px;
  float: right;
  height: 300px;
  width: 38%;
}

#columns {
  width: 65%;
}

#secondpart {
  padding-top: 20px;
  height: 425px;
  background-color: #e44d26;
}

#secondpart h3 {
  font-size: 20px;
  text-align: left;
}

.text {
  float: left;
  width: 30%;
  padding-right: 25px;
  text-align: justify;
}

.text a {
  text-decoration: none;
  color: white;
}

.text1 {
  float: left;
  width: 30%;
  padding-right: 10px;
  border-right: 1px solid maroon;
  text-decoration: none;
}

.text1 a {
  text-decoration: none;
  color: white;
}

.text1 p {
  text-align: left;
  color: white;
}

.text p {
  text-align: left;
  color: white;
}

.button1 {
  padding: 5px;
  margin-top: 5px;
  border-bottom-color: maroon;
}

#formright {
  float: right;
  width: 32%;
  height: 350px;
  padding: 15px 10px 15px 10px;
  background-color: #666666;
  color: white;
  margin-right: -45px;
  border-radius: 5%;
  border-right: 5%;
}

#entries {
  margin-left: 15px;
  margin-top: -25px;
}

#entries input[type=name] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

#hr1 {
  margin-top: -40px;
}

------- footer {
  margin-top: 20px;
}

#socialmedia {
  margin-left: 250px;
  margin-top: 30px;
}

#socialmedia li {
  float: left;
  list-style: none;
  display: inline;
  width: 20%;
  padding: 20px 5px 20px 5px;
}

<!------------------------About page--------------------->#aboutsect {
  height: 300px;
  background-color: yellow;
}

.caja {
  margin-top: 20px;
  height: 550px;
  border-bottom: 1px solid green;
}

#mainimg {
  float: left;
  width: 35%;
  background-color: white;
}

#content {
  float: right;
  width: 45%;
  background-color: white;
}

-------- section h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

section .button1 {
  margin-top: 20px;
}

.caja2 {
  margin-top: 20px;
  padding-left: 150px;
  margin-bottom: 20px;
}

.person {
  float: left;
  margin-left: 30px;
  width: 30%;
  margin-bottom: 40px;
}

section img {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

section h3 {
  font-size: 15px;
  margin-left: 10px;
  margin-top: 20px;
}

section p.centrado {
  font-size: 15px;
  margin-left: 5px;
  margin-top: 20px;
}

section p {
  font-size: 15px;
  margin-left: -40px;
  margin-top: 20px;
}

------- #clients {
  height: 200px;
  background-color: yellow;
}

#clients h3 {
  margin-top: 60px;
}

#cajaotra {
  margin-top: 20px;
  height: 200px;
  border-bottom: 1px solid green;
  margin-left: 150px;
}

.client1 {
  margin-top: 30px;
  padding: 10px;
  margin-right: 70px;
}

------ <!------------------------Service page---------------------!>#services {
  height: 300px;
}

#cajafoto {
  height: 300px;
  border-bottom: 1px solid blue;
}

.equip {
  height: 200px;
  width: 80%;
  margin-left: 100px;
  margin-top: 20px;
}

----------------- #fraccion {
  height: 400px;
}

#cajaourservices {
  margin-top: 50px;
  height: 200px;
}

#ourservices {
  float: left;
  width: 60%;
}

#wantmore {
  float: right;
  width: 30%;
}

----------------- #serviceimages {
  height: 400px;
}

#cajaimagenes {
  height: 300px;
  margin-top: 30px;
}

.train {
  width: 25%;
  margin-left: 20px;
  padding: 30px;
  float: left;
}
<body>
  <header>
    <div class="container">
      <div id="logo">
        <a href="http://www.elpais.com">
          <img src="bottle2.jpg" title="bottle" height="50" width="50"></a>
        <p>Drink Me</p>
      </div>

      <nav>
        <ul>
          <li><a href="http://www.elmundo.es">Home</a></li>
          <li><a href="http://www.elmundo.es">About Us</a></li>
          <li><a href="http://www.elmundo.es">Our Wines </a></li>
          <li><a href="http://www.elmundo.es">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <section id="aboutsect">
    <div class="container">
      <div class="caja">
        <div id="mainimg">
          <img src="circle.jpg" alt="the team">
        </div>

        <aside id="content">
          <h2>Title</h2>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
            Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
          <button class="button1" type="submit">Read More</button>

        </aside>
      </div>
    </div>
  </section>

  <section id="meet">
    <div class="container">
      <h3>MEET THE TEAM</h3>
      <hr>
      <div class="caja">

        <div class="caja2">


          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
        </div>

        <br>
        <br>
        <div class="caja2">

          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
          <div class="person">
            <img src="rostro.jpg">
            <h3>James Keating</h3>
            <p class="centrado">Profile Description</p>
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="clients">
    <div class="container">
      <h3>OUR CLIENTS</h3>
      <div id="cajaotra">

        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
        <img class="client1" src="client1.jpg">
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <ul id="socialmedia">
        <li><a href="http:www.facebook.com">Facebook<img src="facebook.png" height="24" width="24"></a></li>
        <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">Twitter</a></li>
        <li><img src="facebook.png" height="24" width="24"><a href="http:www.facebook.com">LinkedIn</a></li>
      </ul>
    </div>

  </footer>

</body>

Solution

  • Remove all ---- lines and <!-- xxx --> lines from your CSS, as these are not valid CSS and may prevent your CSS from being properly applied. CSS comments usually use the C syntax (/* comment */).