14% difference

[yasminaly]

I cant figure out what the difference is? The only thing I can see is that my banner image is darker. Is that the problem. Also in the 320px I can see i am missing a border on the bottom of the banner. Is that correct.? I don't know what else is wrong. @hellachella

Thank you

[hellachella]

Can you include a screenshot of what markbot shows you? Just drag the screenshot into the text box here.

[yasminaly]

Here are the screen shots

On Tue, Oct 3, 2017 at 3:50 PM, Chelle notifications@github.com wrote:

Can you include a screenshot of what markbot shows you? Just drag the screenshot into the text box here.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/yasminaly/leafy-decorations/issues/1#issuecomment-333957915, or mute the thread https://github.com/notifications/unsubscribe-auth/AP6smWTrQ1RhSBzbR8EfM64alVCvGTXdks5sopAUgaJpZM4PsnUz .

[hellachella]

Oops try again!

[hellachella]

https://learn-the-web.algonquindesign.ca/topics/github-issues/

[yasminaly]

Sorry about that

[hellachella]

Wow are you ever close. Here a few things things should help you push it over.

1.

.masthead {
  background-image: url("../images/leaf-bg.svg");
  background-color: #588477;
  background-repeat: repeat;
  background-size: 64px;
  border: 3px solid #2d5a4d;
}

Instead of a full border: 3px solid #2d5a4d;, try just using border-top and border-bottom. (Those pixels at the top tend to add up and ruin everything at the bottom.):

  border-bottom: 3px solid #2d5a4d;
  border-top: 3px solid #2d5a4d;

2.

.nav a {
  text-decoration: none;
  display: inline-block;
  background-color: #467366;
  color: white;
  align-content: center;
  border: 3px #2d5a4d solid;
  border-radius: 8px;
}

border: 3px #2d5a4d solid; This is out of order and should be border: 3px solid #2d5a4d;

You should not need to add display: inline-block; or align-content: center

3.

.banner {
  background:
    linear-gradient(to bottom, rgba(16, 52, 41, 0), rgba(16, 52, 41, .8)),
    url("../images/banner.jpg") no-repeat center bottom / cover;
}

Your gradient can mess up the screen shots, even if it's off a little. Try this instead of what you have:

linear-gradient(to top, rgba(16, 52, 41, .8), rgba(16, 52, 41, 0) 50%)

Hope this does it.

[yasminaly]

YAY!!!!! it worked

Thank you

Yasmin

[hellachella]

YEEESSSSS!!! You're a rockstar.