title: How do i get a Picture bigger than the box arround it without deforming everything?
body: <p>i have a project at school where im trying to make a flashgames website but im stuck with a problem.I want the picture be bigger than the gray box.The picture how i want it : <a href="https://prntscr.com/frvzyy" rel="nofollow noreferrer">https://prntscr.com/frvzyy</a></p>
  
  <p>My html Code:</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-css lang-css prettyprint-override"><code>    *{
       margin: 0px;
       background-color:darkred;
      }
      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          padding-left: 30%;
          padding-right: 30%;
          overflow: hidden;
          background-color: gray;
      }
      
      li {
          float: left;
      }
      
      li a {
          display: block;
          font-family: Verdana, Helvetica, sans-serif;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
       background-color: darkred;
      }
      #logo {
          display: block;
          font-family: Verdana, Helvetica, sans-serif;
          background-color: black;
          text-align: center;
          padding: 10px 10px;
          text-decoration: none;
      }   
      
      li a:hover {
          background-color: black;
      }
      
      }
      p{font-family:Tahoma;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Games&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/nav.css"&gt;
      &lt;/head&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=""&gt;Games&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;1vs1 Games&lt;/a&gt;&lt;/li&gt;
              &lt;li id="logo"&gt;&lt;img src="src/flash%20games%20logo.png" style="width:250px;"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Categories&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;About us&lt;/a&gt;&lt;/li&gt;
        
          &lt;/ul&gt;
          &lt;h1&gt;Games&lt;/h1&gt;
          &lt;p&gt;content bla bla&lt;/p&gt;
      &lt;/html&gt;   </code></pre>
  </div>
  </div>
  </p>