Herofeeder Posted May 9, 2017 Share Posted May 9, 2017 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="main.css"> </head> <body> <header> <div class="container"> <h1 class="title">My Personal Page</h1> <nav class="links"> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> </nav> </div> </header> <div class="clear"></div> <div class="container"> <div class="picture "> <img src="https://s-media-cache-ak0.pinimg.com/originals/e5/95/14/e59514c89d530660923148bad789ef67.jpg" alt=""> </div> </div> <div class="img2"></div> </body> </html> *{ margin:0; padding:0; } .container{ width:960px; margin:0 auto 0 auto; } .links{ float:right; padding: 20px; background-color: #737373; } a{ color:white; text-decoration: none; margin-right:10px; } .title{ display:inline-block; color: #9d9d9d; font-family: Georgia,"Times New Roman",Times,serif; } header{ background-color: dimgray; padding:20px 0 50px 0 ; margin-bottom:30px; } .clear{ clear: both; } .picture{ border:1px solid black; padding:5px; } i had this problem before where the picture wont stay in the border , but i forgot how i fixed it the first time .can someone help Link to comment Share on other sites More sharing options...
dsonesuk Posted May 9, 2017 Share Posted May 9, 2017 (edited) The container and image are 960px wide, the .picture class element has 5px padding, the image has no percentage sizing to make it responsive, so it remains 960px wide, the 960px image is pushed because of padding 5px to the right forcing the 960px wide image to extend beyond the boundaries of .container and .picture class elements. Edited May 9, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now