How to Place Text and an Image Next to Each Other in HTML

Text and pictures next to each other

Make the about-text position property relative and make the image position property absolute for it to work:

@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  --spacing: 10px;
  --primary: #141414;
  --secondary: #b80003;
  --third: #ffffff;
  font-size: 12px;
}

/*img{*/

/*    width: 100%;*/

/*    margin: auto;*/

/*}*/

.row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

body {
  background-color: var(--primary);
}

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/mountain.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

nav {
  background-color: var(--primary);
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--spacing)) calc(8 * var(--spacing));
  position: sticky;
  top: 0;
  z-index: 1;
}

.logo p {
  font-family: 'Tangerine', cursive;
  font-size: 4.8rem;
  font-weight: bold;
  color: var(--secondary);
}

nav ul li {
  padding-top: calc(1.5 * var(--spacing));
  display: inline-block;
}

nav ul li a {
  color: var(--third);
  font-size: 1.2rem;
  font-weight: 400;
  /*padding:calc(1.5*var(--spacing)) 0 0 calc(3.6*var(--spacing));*/
  padding: 0 calc(var(--spacing));
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

nav ul li a:hover {
  color: var(--secondary);
}

.icon {
  padding-top: calc(1.5 * var(--spacing));
  color: var(--third);
  cursor: pointer;
}

.check {
  display: none;
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 8px;
  }
  nav {
    /*padding: 0 50px;*/
    flex-direction: column;
    position: relative;
  }
  .check {
    display: block;
    position: absolute;
    top: calc(2 * var(--spacing));
    right: calc(4 * var(--spacing));
  }
  nav ul {
    width: 100%;
    height: 100vh;
    background-color: ghostwhite;
    display: none;
    position: fixed;
  }
  .showmenu {
    display: block;
  }
  nav ul li {
    display: block;
    padding: calc(2 * var(--spacing));
  }
  nav ul li a {
    color: black;
  }
}

.header-content {
  text-align: center;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  position: relative;
  top: calc(15 * var(--spacing));
}

.header-content h2 {
  font-size: 4rem;
  color: var(--third);
  margin: calc(1.3 * var(--spacing));
}

.header-content p {
  font-size: 1.8rem;
  color: var(--third);
  font-weight: 500;
}

.btn {
  /*display: flex;*/
  /*justify-content: space-evenly;*/
  /*flex-direction: row;*/
  align-items: center;
  text-align: center;
  margin: calc(2 * var(--spacing));
}

.btn-1 {
  background-color: var(--secondary);
  color: var(--third);
  padding: calc(var(--spacing)) calc(2 * var(--spacing));
  border: none;
  letter-spacing: 1px;
  outline: none;
  border-radius: 1.5px;
}

.about-space {
  /*display: inline-block;*/
}

.about {
  margin: calc(6*var(--spacing));
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-text {
  position: relative;
  padding: calc(6*var(--spacing)) calc(6*var(--spacing));
  background-color: var(--secondary);
}

.about-text h2 {
  padding: calc(2*var(--spacing)) 0;
  font-size: 2.4rem;
  color: var(--third);
}

.about-text p {
  font-size: 1.3rem;
  color: var(--third);
}

.about-text img {
  object-fit: contain;
  display: inline-block;
  width: calc(48*var(--spacing));
  height: calc(44*var(--spacing));
  /*position: absolute;*/
}

.personal-img {
  display: flex;
  position: absolute;
  left: 70%;
  object-fit: contain;
}

<html DOCTYPE="html5">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Training with navbar</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/all.min.css">
</head>

<body>

  <header>
    <nav>
      <div class="logo">
        <p>Portfolio</p>
      </div>

      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <label class="check">
            <i class="fas fa-bars fa-lg icon" id="menu"></i>
        </label>

    </nav>

    <div class="header-content">
      <h2>Welcome to Portfolio</h2>
      <p>Let's chat</p>

      <div class="btn">
        <button class="btn-1">Book Now</button>
      </div>
    </div>
  </header>

  <section class="about">
    <div class="row">

      <div class="about-text">
        <img src="https://wallpaperaccess.com/full/1376490.jpg" class="personal-img" alt="about me picture">
        <h2>About</h2>
        <p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university. I have three years experience in React.
        </p>

      </div>

    </div>

  </section>
  <script src="app.js"></script>
</body>

</html>

How to place a text next to the picture?

Just use some wrapper divs like this:

<div>
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200px" width="200px" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div style="clear: left;">
    <p style="float: left;"><img src="http://placekitten.com/g/200/200" height="200" width="200" border="1px"></p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>

jsFiddle example

Display Image and Text next to each other HTML

Your problem is that you have applied the clearfix but there is no float applied! Try adding the following

.cf img {float:left;}
.cf div  {float:left;}

Demo

Clearfix .cf does nothing to float. It's purpose is to ensure the "parent" element of floated elements "expand" to contain the floated elements. Adding a backgound-color demonstrates this: http://jsfiddle.net/kxpur7z3/1/

My code in the answer floats each of the elements to the left. Note that "floating" removes the elements from the "natural flow" of the document.

Clearfix Demo

Here are a couple of good references to continue with:

https://developer.mozilla.org/en-US/docs/Web/CSS/float
http://www.sitepoint.com/web-foundations/floating-clearing-css/

So you want lots of text. Well as block and inline-block elements expand to fit their content you need to apply some width attributes. YOu have some options here.

Apply a specific width to the text: width:80%, width:300px etc
Applying a calculated width to the text (thanks @ 4dgaurav for reminding me of this): width:calc(100% - 100px)
Go dynamic on both image and text with complimentay percentages: img {width:20%;} div {width:80%;}

Demo of various options

How to place text and image next to each other?

Use css Flex. Add display: flex on .content.

.content {  display: flex;}
.content img {  margin-right: 10px;  display: block;}
.content h3,.content p {margin: 0;}

<div class="content">  <img src="somesrc">  <div class="text">    <h3><strong>TITLE</strong></h3>    <p>Description</p>  </div></div>

Image and Text next to each other and in the middle of the div

A more elegant solution using display:inline-flex;: https://jsfiddle.net/cfvn5vaq/6/

Adding the following CSS:

.button {
  display:inline-flex;
  align-items:center;
}

And some margins to the inner elements. The button is also completely scalable and responsive. Hope I helped.

3 images next to each other with text

You can simply use flex and consider background image in order to use text over it. You may also add an overlay to control the opacity of the image :

UPDATE

Added media query for better view on mobile

body {  margin: 0;  padding: 0;}
.container {  display: flex;  height: 100vh;}
.image {  position: relative;  flex: 1;  margin: 5px;  text-align: center;  background-size: cover;  display: flex;  align-items: center;}
.image:before {  content: "";  position: absolute;  top: 0;  right: 0;  left: 0;  bottom: 0;  background: rgba(0, 0, 0, 0.7);  transition: 1s;}
.image:hover::before {  background: rgba(0, 0, 0, 0.5);}
.image p {  position: relative;  z-index: 1;  flex: 1;  color: #fff;  font-size: 18px;}
@media all and (max-width:460px) {  .container {    flex-direction: column  }}

<div class="container">  <div class="image" style="background-image:url(https://lorempixel.com/400/600/)">    <p>text text</p>  </div>  <div class="image" style="background-image:url(https://lorempixel.com/500/400/)">    <p>text text</p>  </div>  <div class="image" style="background-image:url(https://lorempixel.com/600/600/)">    <p>text text</p>  </div></div>