Markbot problem - Githubissues

When I run my code through Markbot it says that everything is right expected but my website is too visually different by 18%. However, when I look the refferrence photo compared to my website it looks identical.

Here's my index.html

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Home</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/main.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sigmar+One" rel="stylesheet">
</head>
<body>

  <header>
    <h1>Berries</h1>
    <nav>
      <ul class="nav">
        <li><a class="current" href="index.html">Home</a></li>
        <li><a href="blueberries.html">Blueberries</a></li>
        <li><a href="grapes.html">Grapes</a></li>
        <li><a href="red-currants.html">Red Currants</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>Berries, berries, oh my!</h2>
    <p class="intro">In everyday English, “berry” is a term for any <b>small edible fruit</b>. These “berries” are usually <b>juicy</b>, <b>round</b>, <b>brightly coloured</b>, sweet or sour, and do not have a stone or pit, although many seeds may be present.</p>
  </main>
  <footer>
    <small>© Berries.</small>
  </footer>

</body>
</html>

And here's the main.css

html {
  background-color: white;
  box-sizing: border-box;
  color: #2f2d13;
  line-height: 1.5;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  display: block;
  margin: 0;
  padding: 0;
}

header {
  background-color: #ffe500;
}

h1 {
  display: block;
  margin: 0;
  font-family: "Sigmar One", serif;
  font-size: 3rem;
  color: #b20953;
  text-align: center;
}

nav ul {
  margin: 0;
  padding: .6em 0;
  padding-bottom: 5px;
  padding-top: 0;
  text-align: center;
  list-style-type: none;
  font-family: georgia, serif;
}

nav li {
  display: inline;
  padding: 0;
}

nav a {
  display: inline-block;
  width: auto;
  margin: 0 .3px;
  padding: .2em .5em .3em;
  background-color: #b2a212;
  font-size: 1.125em;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
}

a:hover {
  background-color: #cc1465;
}

main {
  padding: 0 .75em;
}

h2 {
  font-family: "Sigmar One", serif;
  font-size: 1.875rem;
  color: #b20953;
  text-align: left;
}

img {
  display: block;
  width: 100%;
}

p {
  display: block;
  font-family: Georgia, serif;
  font-size: 1rem;
  padding: .75em;
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
}

footer {
  background-color: #ffe500;
  text-align: center;
  padding: .75em 0;
}

small {
  font-family: Georgia;
  font-size: .75rem;
}

.nav .current {
  background-color: #b20953;
}

.intro {
  padding-right: 0;
  padding-bottom: 0;
}

.berries {
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 16px;
}

@thomasjbradley

RukiyaS / navigation-highlight

Markbot problem #1