Container Issue

by fun_code11

HTML

<body>

  <div class = "container">
<h2> Hello World </h2>
</div>

</body>

<footer>
</footer>

CSS

.container{
  background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 600px;
  margin-top: -10px;
  margin-left: -10px;
  margin-right: -10px;
}


.container::after{
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}