CSS flexbox issues (aligning elements in row)-CodePudding

In the below scenario, I am not able to align options "about me" and "projects" next to eachother in a row. I have tried to add a flex-direction in the menu class, but doesnt seem to help. Anyone have any idea?

CSS code:

#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);}

.main-heading {
font-size: 60px;
font-family: helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: blanchedalmond;
color:dimgrey;
padding: 20px;
margin: -20px;}

. menu {
font-size: 20px;
font-family: helvetica, sans-serif;
text-transform: uppercase;
background-color: blanchedalmond;
color: dimgrey;
padding: 50px;
margin: 15px;
flex-direction: row;}

HTML code:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="back">
        <div>
          <h1 >andreas media</h1>
        </div>
        <div >
          <nav>
              <h2>about me</h2>
              <h2>projects</h2>
        </nav>
         </div>
     </div>
</body>

CodePudding user response：

You needed to add a display : flex; on the nav, like so :

#back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}

.main-heading {
  font-size: 60px;
  font-family: helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  background-color: blanchedalmond;
  color: dimgrey;
  padding: 20px;
  margin: -20px;
}

.menu {
  font-size: 20px;
  font-family: helvetica, sans-serif;
  text-transform: uppercase;
  background-color: blanchedalmond;
  color: dimgrey;
  padding: 50px;
  margin: 15px;
  flex-direction: row;
}

/* lines I added */
nav{
  display:flex;
  align-items:center;
  gap:2rem; 
}

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="back">
    <div>
      <h1 >andreas media</h1>
    </div>
    <div >
      <nav>
        <h2>about me</h2>
        <h2>projects</h2>
      </nav>
    </div>
  </div>
</body>

CodePudding user response：

You need to assign display: flex to the parent div, in your case 'nav'

nav{
  display: flex;
}

This will put them side to side... If you need them to also be aligned horizontally and vertically you can use justify-content and align-items as so:

nav{
  display: flex;
  justify-content: center;
  align-items: center;
}

You can find a very good guide to flexbox here.