Right Align Logo Above Text Using Flex

I am trying to Align 1 of 2 Items above the other while using flex. I have a .section which displays:flex - .main-body which defines the width of the container and then .logo & .content within that. I am not sure where I am messing it up but I am trying to right align .logo over .content (or the smiley in my example below). By using display:flex in .section, I was able to center a container (.main-body) and keep all items within that container set to a specific width- however, when I try to align .logo to the right by using justify-content or any other flex property, there are no changes to the logo's position.

I have found a make shift solution in using "margin-left: XXXpx;" on .logo but that pushes the div container .logo over so that I then get a horizontal scroll.

EDIT: Sorry I think I wasn't very clear (its getting late!). The code snippet below in full screen shows the goal and what I am looking to do without having to use .logo {margin-left: 500px;} to achieve the result. Without the margin-left property, the face is left aligned above the text. Basically I am wondering how I can set this up so it is right aligned above the text utilizing flex.

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0S56P8lrzrjb-7aJX3QG_feOPux89cnLLXF_UJ49tHAys99ccw') no-repeat;
    height: 205px;
    width: 240px;
    display: flex;
    justify-content: right;
    align-self: flex-end;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

I made up this example in codepen to show the structure and what I am trying to accomplish but without having to rely on "margin-left" within .logo, How can I accomplish this by using the flex?

Solution

Try this:

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWvNoFhT3HnWkUhpowyn5Zdu1mwGXA1JpNHqyQenW7upqnfIic') no-repeat;
    height: 229px;
    width:229px;
    float: right;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
  clear: right;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>