Jump to content
Herofeeder

Border and Picture problem

Recommended Posts

 

<!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 

Share this post


Link to post
Share on other sites

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 by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...