title: the background-image for the pizza hut logo is not showing up
body: <p>I've tried to make a pizza hut logo appear in the center of the navigation bar but the image does not appear can you please help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;replit&lt;/title&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;style&gt;
  header{
  margin:auto;
  text-align:center;
  }
  li   {
  display: inline-block;
  list-style-type: none;
  margin: 20px;
  }
  header nav ul li .logo a{
  text-indent: -9999999px;
  background-image:url("https://media.cnn.com/api/v1/images/stellar/prod/190625084159- 
  20190625-pizza-hut-logo-new.jpg?q=x_3,y_0,h_1684,w_2993,c_crop/h_270,w_480");
  
  }  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;Home&lt;/li&gt;
        &lt;li&gt;Menu&lt;/li&gt;
        &lt;li class="logo"&gt;
          &lt;a href="index.html"&gt;pizza hut logo&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;About&lt;/li&gt;
        &lt;li&gt;Location&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/nav&gt;
   &lt;/header&gt;
   &lt;section&gt;
    &lt;div&gt;a&lt;/div&gt;
    &lt;div&gt;b&lt;/div&gt;
    &lt;div&gt;c&lt;/div&gt;
   &lt;/section&gt;
   &lt;footer&gt;&lt;/footer&gt;
   &lt;script src="script.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've been trying to debug this for a while and I still could not find an answer.</p>