HTML and CSS Blocks - Change color of the entire block on hover over

Question

I have a series of codes I want to highlight with a dark color once a user hovers over them. I'm not sure what I am doing wrong here. When I add in a <div>, I can get the text to highlight, however I literally want the entire block to change its color. I know adding the <div> isn't the correct approach, but I wanted to demonstrate that I am trying. I've tried a few other things, including trying to include an <article> tag and apply the hover color in my CSS code, but to no avail.

It's probably something simple I am overlooking, any help is appreciated.

* {
  box-sizing: border-box;
}
main {
  max-width: 1100px;
  margin: 15px auto;
  padding: 0 15px;
  width: 100%;
  display: grid;
  /* Define Auto Row size */
  grid-auto-rows: 215px;
  /*Define our columns */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1em;
}

article {
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  background-color: #55BBE9
  }

article: hover {
    background-color: #1B2631;
  }

div:hover {
    background-color: #1B2631;
  }

<main>
  <article><div><b>Code 1</b></div></article>

  <article><div><b>Code 2</b></div></article>

  <article><div><b>Code 3</b></div></article>
</main>

Answer 1

article:hover {
  background-color: #1B2631;
}

You only need to remove the space between the colon and hover. This works fine with me.