Border and picture not playing nice


#1

<!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 the same problem before but i forgot how i fixed it


#2

the padding of .picture causes the space between border and image