CSS：Floats没有按预期工作

Question

我已经做了一些环顾四周，我仍然不确定我现在做的花车有什么问题。我有一个我正在研究的部分。我目前有一个边框，所以我可以看到它显示更好的区域。但是，当我删除此边框时，内容会完全转移到页面的新区域。

我认为这可能与我的花车做错了，但是我还没能在网上找到任何东西来帮我弄清楚这个问题。

/*------------------------------------------------------------------
[ Basic CSS Startup ]
------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  color: #777;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}

.clearFix::after {
  overflow: auto;
  content: "";
  display: table;
  clear: both;
}

.container {
  max-width: 120rem;
  margin: 0 auto;
}

.site-container {
  max-width: 160rem;
  margin: 0 auto;
}


/* adds margin between sections */

.section-spacing {
  margin-top: 10rem;
}


/*------------------------------------------------------------------
[ Reusable CSS ]
------------------------------------------------------------------*/


/* Header Font Size */

.header-font {
  font-size: 2.5rem;
  font-weight: bold;
  color: #566467;
  margin-bottom: 5rem;
  text-transform: uppercase;
}

.content-font {
  color: #919191;
  line-height: 2rem;
  hyphens: auto;
}


/*------------------------------------------------------------------
[ Grid ]
------------------------------------------------------------------*/

.row {
  max-width: 120rem;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 8rem;
}

.col-1-of-3 {
  width: calc((100% - 2 * 5rem) / 3);
  float: left;
}

.col-2-of-3 {
  width: calc(2 * ((100% - 2 * 5rem) / 3) + 5rem);
  float: left;
}

.col-1-of-3:not(:last-child) {
  margin-right: 5rem;
}


/*------------------------------------------------------------------
[ Header ]
------------------------------------------------------------------*/

.headerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.headerText {
  margin: 5rem;
  color: #fff;
  font-size: 6.5rem;
  letter-spacing: .5rem;
  border-top: .2rem solid #fff;
  border-bottom: .2rem solid #fff;
  text-transform: uppercase;
  animation: fadeIn 3s ease-out;
}

.btn:link,
.btn:visited {
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  padding: 2rem 4.5rem;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {
  color: #000;
  transition: all .2s ease-in;
}

.btn-white {
  color: #fff;
  border: .2rem solid #fff;
  animation: fadeIn 3s ease-out;
}

.btn-white:hover {
  border: .2rem solid #000;
  transition: all .2s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*------------------------------------------------------------------
[ SlideShow ]
------------------------------------------------------------------*/

.slide {
  width: 100%;
  height: 95vh;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
  background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.slides {
  height: 95vh;
  width: 100%;
  background-color: #252f31;
  overflow-x: hidden;
}

.slide_1 {
  background: url(../img/andromeda_1600_1000.jpg) no-repeat center center;
}

.slide_2 {
  background: url(../img/nasa_1600_1000.jpg) no-repeat center center;
}

.slide_3 {
  background: url(../img/spacex_1600_1000.jpg) no-repeat center center;
}


/* https://codepen.io/vavik96/pen/BRxxQx?editors=1100 */


/* Example of carousel */

.slide {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation: carousel-fade 15s linear infinite;
  -webkit-animation: carousel-fade 15s linear infinite;
  -moz-animation: carousel-fade 15s linear infinite;
  -ms-animation: carousel-fade 15s linear infinite;
}

.slide:nth-child(2) {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
}

.slide:nth-child(3) {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -ms-animation-delay: 10s;
}

@keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-webkit-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-moz-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

@-ms-keyframes carousel-fade {
  0%,
  38%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}


/*------------------------------------------------------------------
[ Main Navigation ]
------------------------------------------------------------------*/

.navigation {
  background-color: #252f31;
  padding: 2.5rem;
}

.mainNav {
  float: right;
  list-style: none;
  text-transform: uppercase;
}

.mainNav li {
  margin-left: 4rem;
  display: inline-block;
}

.mainNav li a:link,
.mainNav li a:visited {
  color: #fff;
  text-decoration: none;
}

.mainNav li a:hover,
.mainNav li a:active {
  color: #2fca6f;
  cursor: pointer;
  transition: color .3s ease-in;
  text-decoration: none;
}

.stickyNav {
  position: fixed;
  top: 0;
  width: 100%;
}


/*------------------------------------------------------------------
[ Value Section ]
------------------------------------------------------------------*/

.values {
  margin-bottom: 10rem;
}


/*------------------------------------------------------------------
[ About Me ]
------------------------------------------------------------------*/

.about-container {
  max-width: 140rem;
}

img {
  height: 80rem;
  width: 60rem;
  margin-right: 1.5rem;
  display: inline-block;
  float: left;
  background-color: red;
}

.about-content {
  margin-left: 1.5rem;
  margin-top: 10rem;
  background-color: #f2f2f2;
  border: 1px solid red;
}

div p.content-font {
  margin-top: 5rem;
}

<section class="about-me site-container clearFix">
  <div class="about-container clearFix">
    <div class="img-content">
      <img src="img/house_sky_650_850.jpg" />
    </div>

    <div class="about-content clearFix">
      <h3 class="header-font section-spacing">About Me</h3>
      <p class="content-font">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut eu sem integer vitae justo eget. Leo a diam sollicitudin tempor id. Feugiat nisl pretium fusce id velit ut tortor.
      </p>
      <p class="content-font">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus interdum posuere lorem ipsum.
      </p>
    </div>
  </div>
</section>

红色部分是列出的尺寸的图像。右边应该是内容部分。我将其设置为在页面的右侧结束，以便与页面的其余内容保持内联。是否有人可以指出我在这里出错的地方，我仍然相当新的CSS考虑所有事情，并且在大约一个小时的调整之后现在还没有弄清楚。