Image is not getting aligned in the navigation bar - html

Question

I wanted to know a few things:
1)How to get the circular profile 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?
I am adding a Fiddle here: https://jsfiddle.net/cLbfnu7p/1/
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">
<li>Home</li>
<li>Login</li>
<li>Contact</li>
<li>Store</li>
<li>Buy</li>
</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>
Edit
html,body{
max-width: 100%;
overflow-x: hidden;
}
body{
//background-image: url("../Images/Design.png");//opacity: 0.4;
background-color: #ededed;
background-size: 1600px auto;
font-family: 'Roboto',sans-serif;
margin: 0;
padding: 0;
}
.header{
background-color: #FFFFFF;
width: 100%;
height: 123px;
text-align: center;
font-family: 'TypographLight';
border-bottom: 1px solid #B0B0B0;
}
.header .logo{
padding: 25px;
padding-left:44px;
float: left;
}
.header .menu li{
display: inline;
}
.header .menu a:hover{
color: #000000;
text-decoration: underline;
}
.header .menu{
display: inline-block;
margin-right: 230px;
}
.header ul {
padding: 10px;
margin-top: 0px;
}
.header .menu a {
color: #777777;
font-size: 23px;
text-decoration: none;
line-height: 114px;
padding:11px;
}
.header .menu .active {
color: #000000;
}
.image-slideshow .container-text {
font-family: CodeBold;
color: white;
left: 0;
position: absolute;
top: 34%;
width: 100%;
}
.image-slideshow .container-text .heading{
font-size: 97px;
}
.image-slideshow .container-text .sub-heading{
font-size: 20px;
font-family: 'TypographLight';
}
.container-slide{
position:relative;
text-align:center;
}
.container-slide img{
margin-top: -5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.image-slideshow .container-text .img-button{
margin-top: 20px;
font-family: 'TypographLight';
background-color:rgba(112,112,112,.7);
border:2px solid #DBDBDB;
color: #FFFFFF;
cursor: pointer;
border-radius: 4px;
outline: none;
width: 150px;
height: 40px;
font-size: 15px;
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.image-slideshow .container-text .img-button:hover{
background-color:rgba(67,67,67,.7);
-webkit-transition:all 0.2s;
border:2px solid #CDCDCD;
transition-timing-function: ease-out;
}
#font-face{
font-family: TypographLight;
src: url('../Fonts/TYPOGRAPH PRO Light.ttf');
}
#font-face{
font-family: CodeBold;
src: url('../Fonts/CODE Bold.otf');
}
.section-divider{
text-align: center;
font-style: 'Roboto';
font-size: 40px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
margin-top: -7px;
}
.section-divider p{
font-size: 20px;
margin-top: 4px;
}
.showcase{
max-width: 1200px;
text-align: center;
margin: auto;
}
.showcase img{
-webkit-filter:grayscale(40%);
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.showcase img:hover{
-webkit-filter:grayscale(0%);
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.r1{
display: inline;
}
.r2{
display: inline;
}
.R{
display: block;
}
.c{
left: 390px;
position: absolute;
margin-top: -50px;
clip:rect(50px,400px,190px,0px);
}
.c2{
position: absolute;
left: 945px;
}
.c3{
position: absolute;
left: 793px;
}
.header .img_cont_pro img{
display: inline;
margin: 0 auto;
height: 150%;
width: auto;
}
.header .img_cont_pro{
width: 40px;
height: 40px;
position: relative;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: right;
}
.user-details{
margin-right: 2%;
padding-top: none;
margin-top: none;
overflow: hidden;
}
Thanks A Lot

Answer 1

For number 1 you should move the user-details div block to after the logo but before the menu. I would then make padding-top:40px;.
For both padding and margin you cant use none as that isnt allowed you should use 0 if you dont want it to have any visible margin or padding.
You should be using inspect element developer tools (right click menu in chrome if you're using that) to look at your code and you would see this and get a better understanding of what the code is doing and where its positioning on the page.
Also for your second point why have you made the images in two different divs with class 'R' (you should call your classes better names that make sense and allude to what they do) and in the second div you have used a new class on the images:
.c {
left: 390px;
position: absolute;
margin-top: -50px;
clip: rect(50px,400px,190px,0px);
}
This is whats making them not line up with the top 2 images. Plus r1 and r2 classes are both the same so no need for them unless you plan to add extra styling to one of them.
In regards to the 3rd point not sure what you are asking for. A dropdown menu? Hover styles? On click animations of some kind?