I had some queries in mind:
1) How can I ensure that the circular profile image on the rightmost side fits within the header without overflowing?
2) How do I properly align the last three images at the bottom (in the "R" class), with adequate spacing between them while taking care of any cropping issues?
Here's a Fiddle link for reference: 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">
<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>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;
}And so forth...