Why does the css border not appear all the way around my html image?

Question

I have an html page services.html with two images on it. One image, placeholder.jpeg lies partly on top of another image physiotherapy-06.peg and I have applied css styling to the placeholder.jpeg image with border: 10px solid gray;. But only part of this image has its border rendered, the part that doesn’t lie on the physiotherapy-06.jpeg image. How do I get the border to render fully around the edge of the placeholder.jpeg image?

Here is my services.html file;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> -->
  <meta name="robots" content="index, follow" />
  <title>JU Physiotherapy - Services</title>
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="css/styles.css" />

</head>

<body>

  <header class="services-header">
    <img class="services-title-image" src="images/physiotherapy-06.jpeg" alt="">
    <img class="services-logo-image" src="images/placeholder.jpeg" alt="">
  </header>

</body>

</html>

Here is my styles.css file;

.services-header {
    border: none;
}

.services-title-image {
    width: 100%;
}

.services-logo-image {
    width: 30%;
    display: block;
    border: 10px solid gray;
    margin: -15% auto 0;
}

Here is a screenshot of the result;

Leave a Comment Cancel reply