title: Why same html and css is showing differently?
body: <p>I am learning the web technology. I was trying to build a portfolio site by following a youtube video. The below code are the html and css code of the index page.</p>
  
  
  <pre><code>&lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Nilavro Seal - Developer, Programmer, ML Enthasiast&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;../Portfolio/style.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;sidebar&quot;&gt;
              &lt;!-- Nilavro --&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;../Portfolio/intro.html&quot;&gt;My Intro&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;../Portfolio/services.html&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;../Portfolio/blog.html&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;../Portfolio/contact.html&quot;&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;main&quot;&gt;
              &lt;div class=&quot;infoContainer&quot;&gt;
                  &lt;div class=&quot;devInfo&quot;&gt;
                      &lt;div class=&quot;hello&quot;&gt;Hi I am &lt;/div&gt;
                      &lt;div class=&quot;name&quot;&gt;Nilavro Seal&lt;/div&gt;
                      &lt;div class=&quot;about&quot;&gt;Developer,Programmer, ML Enthasiast&lt;/div&gt;
                      &lt;div class=&quot;moreabout&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed esse officiis
                          molestiae ipsa quibusdam vero.&lt;/div&gt;
                      &lt;div class=&quot;buttons&quot;&gt;
                          &lt;button&gt;Download CV&lt;/button&gt;
                          &lt;button&gt;Contact Me&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;devPic&quot;&gt;&lt;img src=&quot;dev.png&quot; alt=&quot;Developer&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>and CSS</p>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&amp;display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&amp;family=Source+Code+Pro:wght@300&amp;display=swap');
  
  * {
      margin: 0;
      padding: 0;
  }
  
  .sidebar {
      background-color: rgb(197, 197, 197);
      width: 434px;
      font-family: 'Fira Sans', sans-serif;
      height: 100vh;
  }
  
  .sidebar nav {
      padding: 45px;
  }
  
  .sidebar nav li {
      list-style: none;
      font-size: 30px;
      padding: 33px 0;
  }
  
  .sidebar nav li a{
      text-decoration: none;
      color: black;
  }
  
  .main {
      background-color: yellow;
      width: 90vw;
  }
  
  .container {
      display: flex;
  }
  
  .infoContainer {
      background-color: orange;
      height: 58vh;
      width: 80vw;
      margin: 150px auto;
      display: flex;
      justify-content: space-around;
  }
  
  .devPic img {
      height: 58vh;
  }
  
  .devInfo {
      display: flex;
      justify-content: center;
      flex-direction: column;
      font-family: 'Source Code Pro', monospace;
  }
  
  .hello {
      font-size: 65px;
  }
  
  .name {
      font-size: 50px;
      font-weight: bold;
      font-family: 'Fira Sans', sans-serif;
  }
  
  .about {
      font-size: 40px;
  }
  
  
  .buttons {
      margin-top: 34px;
  }
  
  .buttons button {
      padding: 9px 14px;
      border-radius: 22px;
      color: white;
      background-color: cornflowerblue;
      font-weight: bold;
      font-size: 23px;
      margin: 0 p px;
      cursor: pointer;
  }
  
  .buttons button:hover{
      color: cornflowerblue;
      background-color: white;
  }
  
  .moreabout {
      font-size: 22px;
      font-family: 'Fira Sans', sans-serif;
      margin-top: 23px;
  }
  </code></pre>
  <p>then I copy that code and make another html page named Contact.html. But that page is showing little different.</p>
  <p>I am attaching the differences of these two pages also.
  Can anybody tell why this weird thing is happening??</p>
  <p><a href="https://i.stack.imgur.com/WrdkV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WrdkV.png" alt="Chrome index page" /></a></p>
  <p><a href="https://i.stack.imgur.com/ZzMb7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZzMb7.png" alt="Edge index page" /></a></p>