float left header und banner probleme

[dicker36]

Hallo an Alle,

danke für ihren Hilfen und Tipps

1. Frage floaten links geht nicht, aber wenn ich Position fixed eingebe geht mein Banner links und mein Tabelle rechts

ohne Gridsystem klappt alles wunderbar, aber mit gridsystem klappt leider nicht

body {
  font-family: 'PT Sans Narrow', 'Abel', sans-serif;
  font-size: 16px;
  margin: 0;
  background-color: #e1cc4f;
}

* {
  box-sizing: border-box;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.header-nav {
  background-color: #e1cc4f;
  height: 110px;
  width: 100%;
  position: relative;
  font-weight: bold;
  font-size: 1.1rem;
}

.header-nav a > img {
  height: 160px;
  width: auto;
  float: left;
  margin: .55rem;
  margin-left: 2rem;

  }

.header-nav ul {
  margin-top: 3rem;
  margin-right: 2rem;
  float: right;


}

.header-nav  ul > li {
  Display: inline-block;
  height: 100%;
  padding: 0 .4rem 0 .4rem;
  top: 2.4rem;

}

.header-nav .col-6 {
  padding-top: 0;
  padding-bottom: 0;
}

.header-nav, .container,
.header-nav, .row,
.header-nav, ".col-6 {
  height: 100%;

/* === Header-Banner === */

.header-banner {
  width: 100%;
  height: 0;
  padding-top: 17.448%;
  /* 335 : 1920 x 100 Prozent  */
  background: url("../img/banner.png") no-repeat;
  background-size: contain;
}

 /* === Grid-System(Sichtbarkeit) ===
.border, .border * {
border: 1px solid #91c4ff;
}

[class*='col-'] {
  background-color: #bfddff;
}

p {
  background-color: #91c4ff;
  padding: 0;
  margin: 0;
  color: #FFF;
  text-align: center;
} */


/* === Grid-System === */

/* .container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
} */

.container a > img {
float: left;
margin: .55rem;

}

.row::after {
  content: "";
  clear: both;
  display: block;
}

/* === Attribute findet alle colums (Spalten) === */

/* [class*='col-'] {
  float: left;
  min-height: 1px;
  padding: .8rem;
  background-color: #bfddff;
} */

/* === Breiten der Spaten === */
.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-6 { width: 100%;    }

@media (max-width: 1024px) {
  .col-1 { width: 33.333%; }
}

@media (max-width: 768px) {
  .col-1 { width: 50%;  }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
}

@media (max-width: 480px) {
  .col-1 { width: 100%; }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
}