HTML MKDocs change color and size of a header

The code below is for a microsite that uses a GitHub repo/Materials for MKDocs. The code is for a dropdown menu that will expand and show a clickable image. I am trying to reduce the size of this blue banner by half and remove the pencil icon on the left. How can I re-write my code so that the banner doesn't extend all the way? And how do I remove the pencil icon on the left? The red arrow is where I want the banner to stop.

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    a {  
      display: inline-block;  
      padding: 50px;  
      text-decoration: none;  
    }  
    a:hover {  
      box-shadow: 0 0 50px blue;  
    }  
  </style>  
</head>  
<body>  
  <details>  
  <summary style="font-size: 25px;">Acute & Post Acute</summary>  
  <div class="image-container">  
    <a href="https://website.com">  
      <span style="content:url('Media/Image_1.png')"></span>  
    </a>
  </div>  
</details>  
</body>  
</html>

I tried adding content in but wasn't able to shorten the length.

Solution

So, I reduced the height of the banner by half, and changed the padding of the anchor (<a>) tag from 50px to 25px.

Limited the width of the banner by setting the width of the anchor tag to 200px, to make that it does not pass the full width of the container.

Last thing I did was, eliminate the pencil icon by adding list-style: none; to the summary element to remove the default list styling and use details > summary::-webkit-details-marker { display: none; } to remove the default marker in WebKit-based browsers.

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      display: inline-block;
      padding: 25px; /* Reduced padding to half (from 50px to 25px) */
      text-decoration: none;
      background-color: lightblue; /* Ensure the background color is set */
      width: 200px; /* Set a specific width to shorten the banner */
      box-sizing: border-box; /* Include padding in the element's total width and height */
    }
    a:hover {
      box-shadow: 0 0 50px blue;
    }
    .image-container {
      display: flex;
      justify-content: flex-start; /* Align the content to the left */
    }
    details > summary {
      font-size: 25px;
      list-style: none; /* Remove default list styling, including icons */
    }
    /* Remove the default marker (such as a pencil icon) in WebKit browsers */
    details > summary::-webkit-details-marker {
      display: none;
    }
  </style>
</head>
<body>
  <details>
    <summary>Acute & Post Acute</summary>
    <div class="image-container">
      <a href="https://website.com">
        <span style="display: block;">
          <img src="Media/Image_1.png" alt="Clickable Image" style="max-width: 100%; height: auto;">
        </span>
      </a>
    </div>
  </details>
</body>
</html>

Hope that helps :)