Logo and nav-tags overlapping

Question

The nav-bar within tabs #1 and #2 is overlapping the logo. I tried so many times and i couldt make it work. The nav bar must be right below the logo

I got this.

body { font-family: Arial, sans-serif; margin: 20px; }
    
            table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
    
        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    
        th {
            background-color: #f2f2f2;
        }
        
          .logo-container {
            position: fixed;
            top: 0;
            left: 0;
            margin: 10px;
            z-index: 1000
        }
        
        img.logo {
            background-color: transparent;
            padding: 0;
            margin: 0;
            border: none;
            }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<div class="logo-container">
  <img src="https://picsum.photos/100/200" alt="logo_me" height="100" width="200" class="logo">
</div>
<div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix">        
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" aria-selected="true">Info</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" aria-selected="false" tabindex="-1">Tabla de precios</a>
    </li>
  </ul>
</div>

What am i doing wrong?

I tried so many times without success

Answer 1

the problem is with position fixed in your .logo container class. Just remove it

body {
     font-family: Arial, sans-serif; margin: 20px; 
    }
    
.container{
    display: flex;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.logo-container {
    /* position: fixed; */
    top: 0;
    left: 0;
    margin: 10px;
    z-index: 1000
}

img.logo {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<div class="logo-container">
  <img src="https://picsum.photos/200/300" alt="logo_me" height="100" width="200" class="logo">
</div>
<div class="container mt-4 custom-tabs-container mx-auto my-4 clearfix">        
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="TAB1-tab" data-bs-toggle="tab" href="#TAB1" role="tab" aria-selected="true">Info</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="TAB2-tab" data-bs-toggle="tab" href="#TAB2" role="tab" aria-selected="false" tabindex="-1">Tabla de precios</a>
    </li>
  </ul>
</div>