How can I make my flex boxes go on the same line (align with each other)-CodePudding

I'm trying to make two flex boxes (each in their own flex container) be on the same line (so that they are aligned/colinear horizontally.) I tried to add the following property to all the flex items:

flex-direction: row;

, but obviously it isn't working.

Sorry for the noob question, I'm new and other solutions I found aren't working. Here's the rest of my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<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>Odin Landing Page</title>
</head>

<link rel = "stylesheet" href = "./styles.css">

<body>
    <div class = "headercontainer">
        <img src = "./images/boat.png" alt = "canoe logo" width = "48px" height= "auto" class = "circlephoto">
        <h1 class = "headerlogotext">Canoe</h1>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    }

.headercontainer {
    background-color: #EDEDEE;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.headerlogotext {
    display: flex;
    font-size: 24px;
    font-weight: bolder;
    color: #ff9248;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: row;
}

.link {
    display: flex;
    font-size: 18px;
    font-weight: lighter;
    color: #ffb38a;
    font-family: Arial, Helvetica, sans-serif;
    flex-direction: row;
}

CodePudding user response：

You are missing display: flex in your .headercontainer. It's the parent who needs the flex properties to distribute its children.