img not loading in CSS

May 29, 2022

I have the following CSS file:

.one_quarter {
  width: 225px;
}

.updates,
.updates a {
  color: #C0BAB6;
  background-color: #333333;
}

#header,
#wrapper,
#footer {
  display: block;
  width: 960px;
  margin: 0 auto;
}

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #afaeae;
  background-color: #232323;
}

address,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}

.clear {
  display: block;
  clear: both;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

.imgholder,
.imgl,
.imgr {
  padding: 4px;
  border: 1px solid #D6D6D6;
  text-align: center;
}

.imgl {
  float: left;
  margin: 0 15px 15px 0;
  clear: left;
}

.imgr {
  float: right;
  margin: 0 0 15px 15px;
  clear: right;
}

#wrapper #content #services {}

#wrapper #content #services ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wrapper #content #services ul li {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#wrapper #content #services ul li.last {
  margin-bottom: 0;
}

#wrapper #content #services ul li article {}

#container #content #services ul li article figure {}

#wrapper #content #services ul li article figure img {
  float: left;
  width: 180px;
  height: 150px;
  margin: 0;
  padding: 4px;
  border: 1px solid #666666;
}

#wrapper #content .more {
  text-align: right;
}

<html>

<head>
  <title> Title of page </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
</head>
<div class="wrapper updates">
  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure><img src="images/demo/180x150.gif" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
        <li class="last">
          <article class="clear">
            <figure><img src="images/demo/180x150.gif" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="https://www.os-templates.com/">free website templates</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>
  </div>
</div>

It should look like this from the template:

But the image is not loading where it should and ‘Read more’ is not being aligned right. Thanks for your help in advance

[ enter image description here

Could you please advise what I have omitted? For the link I had tried to add paddign and margin but the link is not moving.

>Solution :

You assigned the latest CSS rules to elements inside an element with the id wrapper, but in your HTML you use this as class name instead.

Replace

<div class="wrapper updates">

with

<div id="wrapper" class="updates">

to get it working.

.one_quarter {
  width: 225px;
}

.updates,
.updates a {
  color: #C0BAB6;
  background-color: #333333;
}

#header,
#wrapper,
#footer {
  display: block;
  width: 960px;
  margin: 0 auto;
}

body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #afaeae;
  background-color: #232323;
}

address,
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  line-height: 0;
}

.clear {
  display: block;
  clear: both;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

.imgholder,
.imgl,
.imgr {
  padding: 4px;
  border: 1px solid #D6D6D6;
  text-align: center;
}

.imgl {
  float: left;
  margin: 0 15px 15px 0;
  clear: left;
}

.imgr {
  float: right;
  margin: 0 0 15px 15px;
  clear: right;
}

#wrapper #content #services {}

#wrapper #content #services ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wrapper #content #services ul li {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#wrapper #content #services ul li.last {
  margin-bottom: 0;
}

#wrapper #content #services ul li article {}

#container #content #services ul li article figure {}

#wrapper #content #services ul li article figure img {
  float: left;
  width: 180px;
  height: 150px;
  margin: 0;
  padding: 4px;
  border: 1px solid #666666;
}

#wrapper #content .more {
  text-align: right;
}

<html>

<head>
  <title> Title of page </title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
</head>
<div id="wrapper" class="updates">
  <div id="content">
    <section id="services" class="last clear">
      <ul>
        <li>
          <article class="clear">
            <figure><img src="https://picsum.photos/250/180" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>content content content <a href="#" title="Free Website Templates">link to other content</a>. For full terms of use of this template please read our <a href="https://www.os-templates.com/template-terms">website template licence</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
        <li class="last">
          <article class="clear">
            <figure><img src="https://picsum.photos/250/180" alt="">
              <figcaption>
                <h2>Indonectetus facilis leo nibh</h2>
                <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="https://www.os-templates.com/">free website templates</a>.</p>
                <footer class="more"><a href="#">Read More &raquo;</a></footer>
              </figcaption>
            </figure>
          </article>
        </li>
      </ul>
    </section>

Regarding the images: Check the paths and the console and network panels in the developer console.