trouble aligning two divs within main-CodePudding

I have two divs within a main tag and a div. I'm trying to align them horizontally besides each other but nothing I've tried is working. I've tried display:inline, flex, float, block, flex-direction... but none are working. Some help would be great, thanks.

css:

<div >
       <main>  
            <div >
                <div >
                    ex
                </div>
            </div>
            <div >
                <div >
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>

.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.site-playlist {
    height: 200px;
    width: 25%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}

CodePudding user response：

You have to apply flex style to your main element.

.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    display:flex;
}

.site-playlist {
    height: 200px;
    width: 100%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}
.playlist-box {
  width:25%
}
.right-column {
  width:75%
}

<div >
       <main>  
            <div >
                <div >
                    ex
                </div>
            </div>
            <div >
                <div >
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>

CodePudding user response：

I try to resolve your problem:

<!DOCTYPE html>
<html>
   <style>
      .flexbox {
      display: flex;
      }
      main {
      width: 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      display:flex;
      }
      .site-playlist {
      height: 200px;
      width: 100%;
      margin-left: 0;
      padding-left: 5px;
      text-align: center;
      padding-top: 5px;
      overflow: scroll;
      }
      .playlist-box {
      width:25%
      }
      .right-column {
      width:75%
      }
   </style>
   <body>
      <div >
         <main>
            <div >
               <div >
                  ex
               </div>
            </div>
            <div >
               <div >
                  What I've Been Up To:
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

Is this what you expect.