How to make the image added to the header at the top?

I want to know a few things:

1)How to get the circular image on the right most side to get in the header and not be out of it?

2)How to Align the Last Three Images on the bottom(in "R" class) properly and have spacing between them while keeping care of the cropping?

3)How To make a Pop out Menu,(Like The One in Google page) that shows various options?

I am adding a Fiddle here: http://ift.tt/1mrWopB

Code:

    <div class="header">
    <div class="nav-container">
        <div class="logo"><img src="Images/logo.png" height="75px" width="auto"></div>
        <div class="menu">
            <ul class="menu-ul">
                <a href="#" class="active"><li>Home</li></a>
                <a href="#"><li>Login</li></a>
                <a href="#"><li>Contact</li></a>
                <a href="#"><li>Store</li></a>
                <a href="#"><li>Buy</li></a>
            </ul>
        </div>
        <div class="user-details">
            <div class="profile_pic">
                <div class="img_cont_pro">
                    <img src="Images/pro_pic.png">
                </div>
            </div>
        </div>
    </div>
</div>


<div class="section-divider">-<p>STUDIO</p></div>

<div class="showcase">
    <div class="R">
        <div class="r1"><img src="Images/Random/one.jpg" width="400px" height="auto"></div>
        <div class="r1"><img src="Images/Random/two.jpg" width="400px" height="auto"></div>
    </div>
    <div class="R">
        <div class="r2 c"><img src="Images/Random/three.jpg" width="400px" height="225px"></div>
        <div class="r2 c2"><img src="Images/Random/four.jpg" width="auto" height="140px"></div>
        <div class="r2 c3"><img src="Images/Random/five.jpg" width="auto" height="140px"></div>
    </div>
</div>

For Some Reason, I am not able to add CSS here,so sorry for that

Thanks A Lot

PS: I am new to web-D, so dont think negatively of the code