Border and Picture problem

Herofeeder · 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

dsonesuk · May 9, 2017

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

Sign In

Border and Picture problem

Recommended Posts

Herofeeder

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity