How do I shift text on the green background next to the logo-CodePudding

HTML code for the given problem

<body>
        <section >
            <div >
            <img src="logo.jpg" alt="">
            <a href="#" >AJ<span >Tutorials</span></a>
        </div>
        <div>
           
        </div>
        </section>
    </body>

css code for the above HTML, I want the AJTutorials on the green background after the logo , not below it. Refer this image After removing display:block

  body {
      font-family: "Comforter", cursive;
      font-family: "Cormorant", serif;
    }
    .Top-heading {
      background-color: rgb(160, 228, 143);
      height: 60px;
      background-size: cover;
    }
    .heading img {
      /*display: block;*/
      position: relative;
      object-fit: fill;
      width: 70px;
      height: 70px;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .AJ {
      text-decoration: none;
      z-index: 2;
      color: black;
    }
    .Tutorials {
      z-index: 2;
      color: red;
    }

CodePudding user response：

Add display: flex; align-items: center; on class .heading check below code

 body {
          font-family: "Comforter", cursive;
          font-family: "Cormorant", serif;
        }
        .Top-heading {
          background-color: rgb(160, 228, 143);
          height: 60px;
          background-size: cover;
        }

        .heading img {
          /*display: block;*/
          position: relative;
          object-fit: fill;
          width: 70px;
          height: 70px;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .AJ {
          text-decoration: none;
          z-index: 2;
          color: black;
        }
        .Tutorials {
          z-index: 2;
          color: red;
        }
        .heading {
           display: flex;
           align-items: center;
        }

<body>
            <section >
                <div >
                <img src="logo.jpg" alt="">
                <a href="#" >AJ<span >Tutorials</span></a>
            </div>
            <div>
               
            </div>
            </section>
        </body>

CodePudding user response：

Whichever element with display: block; will occupy the entire available width. I'd start with removing display: block; from the .heading img.