Analog photography project

Hi everyone!
I am starting with the career of front-end developer.
To begin to have experience I am helping a friend with a photography project. I had a problem, I want to place the logo next to the title and subtitle, I search by all means and I cannot solve it, I leave the html and css code.
I hope you can contribute in a better way. I thank everyone for the help.
Gonzalo Sicca

<!DOCTYPE html>
<html>
<head>
    <link href="resources/css/style.css" type="text/css" rel="stylesheet">
    <title>Herschel Lab</title>
</head>
<body>
    <header>
        <p class="horario">Martes y Viernes de 16 a 19 hs. en Mitre 387, Luján, Bs.As.</p>
        <nav class="navigation">
            <ul>
              <li><a href="#home">Inicio</a></li>
              <li><a href="#products">Productos</a></li>
              <li><a href="#contact">Contacto</a></li>
            </ul>
          </nav>
        <section class="grid">
            
            <img img src="resources/images/logo/logo2.jpeg" alt="logo">
            <h1 class="title">LABORATORIO FOTOGRAFÍA ANALÓGICA</h1>
            <h2 class="subtitle">Revelado y digitalizado 35MM y 120 / Rollos / Cámaras / Accesorios / Talleres</h2> 
        </div>
    </header>
</body>
</html>

* {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.horario {
    background-color: rgb(230, 255, 8);
    width: 100%;
    height: 50px;
    font-size: 16px;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation {
    text-align: right;
    padding: 20px 20px;
    background-color: beige;
}

.grid {
   width: 100%;
   max-width: 1000px;
   margin: auto;
   padding: 60px;
   background-color: aqua;
}

.grid img {
    height: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.title {
    font-size: 28px;
}

.subtitle {
    font-size: 18px;
}

add to .grid

display: grid;
grid-template-columns: 1fr 2fr;

Hello @gonzor88 ,

can you please explain a bit more what you need?
You mentioned to place “next to - title & subtitle”, where exactly you want to place the logo?
[[ Dónde necesitas colocar el LOGO exactamente? ]]

Thanks :slight_smile:

Hello again @gonzor88 ,

as dev7419508367 is mentioning try to use GRID.
Try to check as well more examples with GRID / FLEXBOX (it will help you a lot!!).

I made some changes on your code, please feel free to check and reply back to me if needed.

<!DOCTYPE html>
<html>
<head>
    <link href="resources/css/style.css" type="text/css" rel="stylesheet">
    <title>Herschel Lab</title>
</head>
<body>
    <header>
        <p class="horario">Martes y Viernes de 16 a 19 hs. en Mitre 387, Luján, Bs.As.</p>
        <nav class="navigation">
            <ul>
              <li><a href="#home">Inicio</a></li>
              <li><a href="#products">Productos</a></li>
              <li><a href="#contact">Contacto</a></li>
            </ul>
          </nav>
      
        <section class="grid">
            
            <img img src="resources/images/logo/logo2.jpeg" alt="logo">
          
          <div class="titulos">
                        <h1 class="title">LABORATORIO FOTOGRAFÍA ANALÓGICA</h1>
            <h2 class="subtitle">Revelado y digitalizado 35MM y 120 / Rollos / Cámaras / Accesorios / Talleres</h2> 
          </div>

        </div>
    </header>
</body>
</html>
* {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.horario {
    background-color: rgb(230, 255, 8);
    width: 100%;
    height: 50px;
    font-size: 16px;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation {
    padding: 20px 20px;
    background-color: beige;
  
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.navigation ul {
  list-style-type: none;
}

.grid {
   width: 100%;
   max-width: 1000px;
   margin: auto;
   padding: 60px;
   background-color: aqua;
  
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

.grid img {
    height: 200px;
    float: left;
    margin-bottom: 20px;
    margin-left: 50px;
 
}

.titulos {
  margin-right: 100px;
  margin-top: 30px;
}

.title {
    font-size: 28px;
}

.subtitle {
    font-size: 18px;
}

As you can see I added a new DIV (Called TITULOS) above the class TITLE & SUBTITLE.
Hope this helps!!

Cheers!