title: Boxes Always Crashing into My navbar unable to fix it
body: <p><a href="https://i.stack.imgur.com/pPzCa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pPzCa.png" alt="here this is what happening" /></a></p>
  <p>Html -</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &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;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/services.css&quot;&gt;
      &lt;title&gt;Arson Industries Limited&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;nav class=&quot;navbar-background&quot;&gt;
          &lt;ul class=&quot;nav-list&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;&lt;img src=&quot;image/logo.png&quot; alt=&quot;logo&quot;&gt;&lt;/div&gt;
              &lt;li&gt;&lt;a href=&quot;/index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/about.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/contacts.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/services.html&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;rightnav&quot;&gt;
              &lt;form action=&quot;/search.html&quot; method=&quot;get&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;query&quot; id=&quot;Search&quot; placeholder=&quot;Search&quot;&gt;
  
                  &lt;button class=&quot;btn btn-sm&quot;&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class=&quot;services-section&quot;&gt;
              &lt;div class=&quot;inner-width&quot;&gt;
                  &lt;h1 class=&quot;section-title&quot;&gt;Our Services&lt;/h1&gt;
                  &lt;div class=&quot;border&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;services-container&quot;&gt;
  
                      &lt;div class=&quot;service-box&quot;&gt;
                          &lt;div class=&quot;service-icon&quot;&gt;
                              &lt;i class=&quot;fas fa-paint-brush&quot;&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;service-title&quot;&gt;Web Designs&lt;/div&gt;
                          &lt;div class=&quot;service-desc&quot;&gt;
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;service-box&quot;&gt;
                          &lt;div class=&quot;service-icon&quot;&gt;
                              &lt;i class=&quot;fas fa-code&quot;&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;service-title&quot;&gt;Web Development&lt;/div&gt;
                          &lt;div class=&quot;service-desc&quot;&gt;
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;service-box&quot;&gt;
                          &lt;div class=&quot;service-icon&quot;&gt;
                              &lt;i class=&quot;fas fa-brush&quot;&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;service-title&quot;&gt;Responsive Designs&lt;/div&gt;
                          &lt;div class=&quot;service-desc&quot;&gt;
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque ratione rem porro, nihil.
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  <p>css-</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  * {
      margin: 0;
      padding: 0;
      font-family: &quot;montserrat&quot;, sans-serif;
      box-sizing: border-box;
  }
  
  .services-section {
      background: url(bg.jpg);
      background-size: cover;
      padding: 60px 0;
  }
  
  .inner-width {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      padding: 0 20px;
      overflow: hidden;
  }
  
  .section-title {
      text-align: center;
      color: #ddd;
      text-transform: uppercase;
      font-size: 30px;
  }
  
  .border {
      width: 160px;
      height: 2px;
      background: #82ccdd;
      margin: 40px auto;
  }
  
  .services-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .service-box {
      max-width: 33.33%;
      padding: 10px;
      text-align: center;
      color: #ddd;
      cursor: pointer;
  }
  
  .service-icon {
      display: inline-block;
      width: 70px;
      height: 70px;
      border: 3px solid #82ccdd;
      color: #82ccdd;
      transform: rotate(45deg);
      margin-bottom: 30px;
      margin-top: 16px;
      transition: 0.3s linear;
  }
  
  .service-icon i {
      line-height: 70px;
      transform: rotate(-45deg);
      font-size: 26px;
  }
  
  .service-box:hover .service-icon {
      background: #82ccdd;
      color: #ddd;
  }
  
  .service-title {
      font-size: 18px;
      text-transform: uppercase;
      margin-bottom: 10px;
  }
  
  .service-desc {
      font-size: 14px;
  }
  </code></pre>
  <p>navbar css -</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  
  .nav-list {
      width: 50%;
      /* background-color: black; */
      display: flex;
      align-items: center;
  }
  
  .nav-list li {
      list-style: none;
      padding: 26px 30px;
  }
  
  .nav-list li a {
      text-decoration: none;
      color: white;
  }
  
  .rightnav {
      /* background-color: blue; */
      width: 50%;
      text-align: right;
  
  }
  
  .logo {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .logo img {
      width: 45px;
      border: 3px;
      border-radius: 50%;
      height: 45px;
  
  }
  
  .navbar-background {
      height: 61px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: sticky;
      top: 0;
      cursor: pointer;
      background-color: rgb(38 46 48 / 37%);
      z-index:1;
      
  }
  
  #Search {
      padding: 5px;
      font-size: 17px;
      border: 2px solid grey;
      border-radius: 9px;
  }
  
  .background {
      background: rgba(0, 0, 0, 0.7) url(&quot;../image/nature.jpg&quot;);
      background-size: cover;
      background-blend-mode: screen;  
  
  }
  
  .box-main {
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      width: 50%;
      margin: auto;
  
  }
  
  .firstsection {
      height: 100vh;
      margin-top: -61px;
  }
  
  .firsthalf {
      left: 0;
      line-height: 2;
      /* og 200 hai height */
      /* margin-top: -100px; */
      position: absolute;
      text-align: center;
      top: 50%;
      width: 100%
  }
  
  body {
      height: 100vh;
      overflow-y: hidden;
        
  }
  
  .btn {
      padding: 8px 20px;
      margin: 7px 0;
      border: 2px solid white;
      border-radius: 8px;
      background: none;
      color: white;
      cursor: pointer;
      -webkit-transition: all .15s ease-in-out;
      transition: all .15s ease-in-out;
  
  }
  
  .btn:hover {
      box-shadow: 0 0 10px 0 #e3f0ee inset, 0 0 20px 2px #bebd82;
      border: 3px solid #e1ebea;
  }
  </code></pre>
  <p>I tried fixing it by doing some changes in margin and padding but my search bar is just stuck on that  place nothing seems to work I copied this template from internet i tried making My own but that box problem was coming that time too so i thought my code has some mistakes so i tried to copy paste it from internet and try doing some changes but idk why its not working
  if this question is stupid my apologies i am a beginner</p>