Help

HTML

<div class="Container" id="LegendHolder">
      <div class="Container" id="Legend">
        <h2>Main Pages</h2>
        <div id="LegendItems"><a href="/index.html" base target="_parent">Home page</a></div>
        <div id="LegendItems"><a href="/Home/interests.html" base target="_parent">Interests</a></div>
        <div id="LegendItems"><a href="/BlogHub/bloghub.html" base target="_parent">Blogs</a></div>
        <div id="LegendItems"><a href="/reviews/reviewhub.html" base target="_parent">Reviews</a></div>
      </div>
    </div>

CSS

#Legend {
  margin: 0px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  
  width: 100%;
  height: fit-content;
  h2 {
    margin: 0px;
  }
}

#LegendItems
{
  width: 100%;
  height: fit-content;
  padding: 0%;

  a:hover {
    background-color: #944510;
  }
}
#LegendItems a {
  background-color: #F3701B;
  padding: 5px;
  padding-right: 100%;
}