title: I'm working on a website and I want to make all div's at the middle of the page
body: <p>I tried some codes which I looked from the internet but when I enlarge or miniaturize the page everything's location is changing</p>
  <p><a href="https://i.stack.imgur.com/MyZ50.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MyZ50.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/NceMv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NceMv.png" alt="enter image description here" /></a></p>
  <p>happens like this but when you miniaturize the this website(stack overflow) nothings location changes</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>@import url('https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap');
  *{
      margin: 0;
      padding: 0;
  }
  
  .container{
      background-color: rgb(255, 255, 255);
      height: 100vh;
      background-size: 100% 100%;
  
  }
  
  
  
  .container .navbar{
      width: 50%;
      height: 150px;
      margin-left:500px;
  
  }
  
  .navbar ul{
      border: 5px;
      background-color: rgb(70, 68, 63);
  
  }
  
  .navbar ul li{
      list-style:none;
      display:inline-block;
      margin:0 8px;
      line-height: 80px;
  
  }
  
  .navbar ul li a{
      color: rgb(73, 255, 255);
      text-decoration: none;
      font-size: 30px;
      padding: 6px 13px;
      font-family:Roboto;
      transition: 2s;
      margin-left: 135px;
  
      
  }
  
  .navbar ul li a:hover{
      background-color: rgb(167, 167, 167);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="üi.css"&gt;
      &lt;title&gt;Tech&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container" &gt;
          &lt;div class="navbar"&gt;
              &lt;img src="C:\Users\****\OneDrive\Masaüstü\tech\img\Tech.png"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Ana Sayfa&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="ürünler.html"&gt;Ürünler&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;İletişim&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;            
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>