Align items above paragraph and float next to image

Question

I'm trying to achieve this:image

I can't figure out how to align everything properly without things being pushed out of my container or they overlap each other. I'm trying to float my image left with my Title, a button, and description to the right. I've been going nuts trying to figure out what to change within my CSS or if it's where I have things placed in my HTML.

.section-title {
    display: block;
    text-align: center;
    padding-bottom: 1.5%;
    font-weight: 500;
    font-size: 2.8em;
    transform: translateX(0%) translateY(-25%);
    /* z-index: 0; */
}

.section-title-highlight {
    position: relative;
    color: black;
}

.section-title-highlight:before {
    content: '';
    display: block;
    height: 12px;
    width: 100%;
    background: #35FCCE;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height .5s;
    z-index: -1;
}

.section-title-highlight:hover:before {
    height: 85%;
}

a {
    text-decoration: none;
    cursor: default;
    display: block;
}

.container {
    padding-top: 3%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 7%;
    margin-top: 0;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: rgb(236, 236, 236);
}

.container-item {
    display: flex;
    flex-direction: column;
}

.block-title {
    display: inline-block;
    padding-left: 44%;
    font-size: 1.7em;
}

.block-image {
    display: inline-block;
    width: 40%;
    height: auto;
    float: left;
    padding-right: 4%;
    position: relative;
}

.block-text {
    display: inline-block;
    text-align: left;
    float: right;
}

#projects {
    height: 600px;
    position: relative;
}

<div class="container">
  <div id="projects">
    <div class="section-title">
      <span class="section-title-highlight">Projects</span>
    </div>
    <h3 class="block-title">Title</h3>
    <div class="container-item">
      <!-- <h3 class="block-title">Title</h3> -->
      <p class="block-text">
        <!-- <h3 class="block-title">Title</h3> -->
        <img class="block-image" src="images/mac on desk 1.png"> I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel
        mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse, asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse
        dreamcatcher subway tile XOXO etsy flannel.
        <p class="block-text">Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
          asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
      </p>
    </div>
  </div>
</div>

Answer 1

*{
    margin: 0;
    font-family: sans-serif;
}

.section-title {
    display: block;
    text-align: center;
    padding-bottom: 1.5%;
    font-weight: 500;
    font-size: 2.8em;
}

a {
    text-decoration: none;
    cursor: default;
    display: block;
}

.container {
    padding-top: 3%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 7%;
    margin-top: 0;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: rgb(236, 236, 236);
}

.block-image {
    display: inline-block;
    width: 40%;
    height: auto;
    float: left;
    padding-right: 4%;
    position: relative;
}

.block-text {
    display: inline-block;
    text-align: left;
    float: right;
}

#projects {
    height: 600px;
    position: relative;
}

.item{
    display: flex;
    margin-bottom: 3rem;
}
.item img{
    width: 200px;
    height: 200px;
    border: 1px solid #d3d1d0;
}
.item .text{
    margin-left: 3rem;
}
.item .text h1{
    margin-bottom: 1.5rem;
}
.item .text a{
    background-color: black;
    color: white;
    border-radius: 10px;
    padding: 3px 10px;
    display: table;
    margin-bottom: 1.5rem;
    font-size: 14px;
}
.item .text p{
    font-weight: 600;
}

<div class="container">
    <div id="projects">
        <div class="section-title">
            <span class="section-title-highlight">Projects</span>
        </div>
        <div class="items">
            <div class="item">
                <img src="https://cdn3.vectorstock.com/i/1000x1000/86/32/realistic-empty-computer-display-with-blue-screen-vector-3618632.jpg">
                <div class="text">
                    <h1>Title</h1>
                    <a href="#">View Code</a>
                    <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
                    asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
                </div>
            </div>
            <div class="item">
                <img src="https://cdn3.vectorstock.com/i/1000x1000/86/32/realistic-empty-computer-display-with-blue-screen-vector-3618632.jpg">
                <div class="text">
                    <h1>Title</h1>
                    <a href="#">View Code</a>
                    <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork master cleanse,
                    asymmetrical post-ironic venmo direct trade actually poutine. Fingerstache craft beer master cleanse dreamcatcher subway tile XOXO etsy flannel adaptogen gluten-free pop-up.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

This is probabbly because you have set a fixed height to your contaniner.

#projects {
    height: 600px;
}

Also few things

1. Use flexbox. It is the ideal solution for this type of layout.
2. Your .section-title-highlight is a span. Try to use a header tag instead. It will benifit you.

Here is a quick example using flexbox

.container {
  background-color: rgb(236, 236, 236);
  padding: 15px 0;
}

.card-wrapper {
  display: flex;
}

.right-col, .left-col {
  padding: 15px 15px 0 15px;
}

.left-col {
  width: 40%;
}

.right-col {
  width: 60%;
}

.left-col img {
  width: 100%;
  height: auto;
}

.card-wrapper h3{
  font-size: 1.7em;
  margin: 0;
}

.card-wrapper p{
  margin: 12px 0 0 0;
  /*your paharagraph sytles*/
}

.section-title {
  display: block;
  text-align: center;
  padding-bottom: 30px;
  font-weight: 500;
  font-size: 2.8em;
  transform: translateX(0%) translateY(0%);
}

.section-title-highlight {
  position: relative;
  color: black;
}

.section-title-highlight:before {
  content: '';
  display: block;
  height: 12px;
  width: 100%;
  background: #35FCCE;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height .5s;
  z-index: -1;
}

.section-title-highlight:hover:before {
  height: 85%;
}

<div class="container">
  <div id="projects">
    <div class="section-title">
      <span class="section-title-highlight">Projects</span>
    </div>
    <div class="card-wrapper">
      <div class="left-col">
        <img src="https://a.wattpad.com/useravatar/Coca-Cola.256.650165.jpg">
      </div>
      <div class="right-col">
        <h3>Title</h3>
        <p>I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock.</p>
        <p>Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid YOLO. Lumbersexual craft beer pitchfork.</p>
      </div>
    </div>
  </div>
</div>