Image side by side inside a padding box

by microbians

HTML

<div class="paper">
    <div class="title">Breaking the padding</div>
    <img src="https://scontent-iad3-1.cdninstagram.com/v/t51.29350-15/118725502_323344815574162_3060248876855097318_n.jpg?_nc_cat=107&ccb=2&_nc_sid=8ae9d6&_nc_ohc=aorzyo5LuQkAX__PAEs&_nc_ht=scontent-iad3-1.cdninstagram.com&oh=83499b4f729aff994695b4129cbf628b&oe=5FC39B63"/>
    <div class="caption">Image side by side inside a padding box</div>
</div>

CSS

body {
    background: #f2f2f2;
    padding: 30px;
}
.paper {
    padding: 30px;
    width: 50%;
    border: 1px solid #DCDCDC;
    font-family: helvetica;
    line-height: 1.40;
    background: white;
    box-shadow: 0 2px 0 #dcdcdc;
}

.paper img {
    width: 100%;
    width: calc(100% + 60px);
    margin-left: calc(-30px);
    margin-bottom: 30px;
}

.paper .title {
    text-transform: uppercase;
    margin-bottom: 30px;
}