画像の高さの調整ができない

前提・実現したいこと

画像の下に変な高さがついてしまって、直し方がわかりません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html/css
ソースコード
html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> </head> <body> <div class="wrapper"> <div class="container"> <header> <h1 class="header-title"><span>▼</span>My blog<span>▼</span></h1> <p class="header-content">If today were the last day of my life, would I want to do what I am about to do today?</p> </header> <div class="main"> <div class="blog"> <div class="blog-content"> <div class="img"><img src="img/blog1.jpg" class="img" height=auto></div> <div class="blog-title"> <h2 class="title">ブログタイトル</h2> <p class="date">2017/04/01</p> <p class="text">いつものことだが電車は満員だった。そしていつものことだが若者と娘が腰をおろしとしよりが立っていた。うつむいていた娘が立ってとしよりに席をゆずった。そそくさととしよりが坐った...</p> </div> </div> </div> <div class="sub"></div> </div> </div> </div> </body> </html>

css

@charset "UTF-8";

body{
background-image: url(img/bg.png);
}

.wrapper{
margin:40px 0;
border:1px solid black;
background-color: white;
width: 1100px;
margin:auto ;
text-align: center;
}

.container{
padding:70px 50px 80px 50px;
width:998px;

}

header{
margin-bottom: 20px;
}

.header-title{
color:black;
font-size: 50px;
font-family: cursive;
text-align: center;
margin-bottom: 20px;
}

span{
color:yellowgreen;
}

.header-content{
font-family: cursive;
padding:18px 0;
border-top:1px solid black;
border-bottom: 1px solid black;
text-align: center;
}

.main{
margin-top: 60px;
}

.blog{
margin-right: 48px;
}

.blog-content{
border-bottom: 1px solid black;
width:700px;
display: flex;
}

.img{
width: 280px;
float:left;
padding-bottom: 10px;
margin-right: 20px;

}

.blog-title{
width:400px;
float:right;

}

.date{
margin-bottom: 20px;
margin-top: 2px;
}

.sub{
width:250px;
}

.text{
margin-top: 20px;
}

.title{

}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/09/17 13:40

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）