HTML and CSS problem with sidebar, and hover in my webpage-CodePudding

Hello guys i have a problem with my sidebar, as you can see there are some spaces along the contents of the sidebar and I haven't figured out a way to strictly cover the whole sidebar with its background color . On top of that I have a problem as well with my menu hover. Whenever I hover the background color goes outside the sidebar.

Here are the codes for the html and css.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body{
  min-height: 100vh;
  display: flex;
}
.content{
  flex-grow: 1;
  display: flex;
  
}
.innter-text{
  margin: auto;
}
h3{
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  text-align: center;
  color: white;
  margin-top: 0;
}
h3:hover{
  background-color: #9e9b9b;
  color: #1c1c1c;
  height: 60px;
  margin-top: -17px;
  padding-top: 17px;
}
.sidebar{
  height: 100%;
  min-width: 245px;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #262626;
  padding-top: 20px;
}
.sidebarlogo{
  max-width: 245px;
}
.header{
  height: 60px;
  background-color: #5c5b5b;
  padding-top: 17px;
}
.menu a{
  font-family: 'Raleway', sans-serif;
  padding: 15px 6px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  display: flex;
  width: 100%;
  overflow: auto;
}
.menu a:hover {
  min-width: 100%;
  Background-color: #1b1b1b;
  text-decoration: underline;
}
.fa-building-columns{
  padding-right: 12px;
  font-size: 39px;
}
.fa-books{
  padding-right: 12px;
  font-size: 39px;
}
.fa-users{
  padding-right: 12px;
  font-size: 32px;
}
.fa-megaphone{
  padding-right: 12px;
  font-size: 36px;
}
.fa-arrow-right-from-bracket{
  padding-right: 12px;
  font-size: 39px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x=icon" href="form.png">
    <link rel="stylesheet" href="adminpagecss.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
    <title>Administrator Page</title>
</head>
<body>
    <aside >
      <span>
        <img  src="sidebarlogo1.jpg">
        <div >
            <h3>Welcome to the Admin Page!</h3>
        </div>
        <br>
        <div >
          <a href="Login.html" ><i ></i>Institution Page</a>

          <a href="#"><i ></i>My Courses</a>
          <a href="#"><i ></i>Student Roster</a>
          <a href="#"><i ></i>Announcements</a>

          <br><br><br><br><br><br><br><br>

          <a href="labtask 6.html"><i ></i>Log out</a>
        </div>
      </span>
      </aside>

      <main >
          <span >Content area</span>
      </main>

</body>
</html>

I would love to hear your suggestions and possibly solutions to my problems thank you!

CodePudding user response：

You can add box-sizing: border-box to .menu a to fix the size of the anchor.

Regarding:

there are some spaces along the contents of the sidebar and I haven't figured out a way to strictly cover the whole sidebar with its background color

Not so sure what you mean here, if you mean the white margin around it, you need to remove marding from the body.

body {
  margin: 0;
}

Or use normalize.css

CodePudding user response：

For the sidebar, consider using a fixed position with a height of 100vh units. This will fix it to the height of the viewport!

You need them on the sidebar class!

Be sure to also get rid of the user agent margin by following this suggestion: https://stackoverflow.com/a/71629532/7795815