Hi there I am having trouble creating the perfect parallax scrolling effect I am using HTML 5 and CSS 3.

So far I have the effect working but the image is not covering the corners of the page.

Here's my source code Any Help Is Greatly Appreciated Thanks!


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/blog.css">

<div class="parallax"></div>

      <div class="center">
        <div class="card">
          <h2>Title Heading</h2>
          <h5>Title Description, Feb 6, 2019</h5>
          <div class="fakeimg" style="height:200px;">Image</div>
          <p>Some Text..</p>


body {
  font-family: Arial;
  padding: 20px;
  background: white;

body, html {
  height: 100%;

.parallax {
  /* The image used */
  background-image: url("img/cover.jpg");

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

.center {
  margin: auto;
  width: 50%;
  padding: 10px;

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 80%;
  padding: 20px;

/* Add a card effect for articles */
.card {
  background-color: #f1f1f1;
  padding: 20px;
  margin-top: 20px;

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;

@media screen and (max-width: 800px) {
  .center, .parallax {
    width: 100%;
    padding: 0;