AtomのHTMLで改行ができない

現在、ドットインストールというプログラミング学習サイトを使用しHTMPの勉強をしています。
このサイトの、「初めてのHTML」という章の＃７までの内容を実際に書いたコード以下のコードとなります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>太郎のポートフォリオタグ</title>
6<link rel="icon" href="favicon.ico">
7<meta name ="description" content="太郎のポートフォリオです">
8</head>
9<body>
10HOME
11ABOUT
12<img src="img/header.png" width="400" height="130" alt="ヘッダー画像">
13
14<img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
15<h1>山田太郎です</h1>
16<p>UI/UXデザイナー初心者です</p>
17<img src = "img/work1.png" width="400" height="260" alt = "勇者ゲームアイコン">
18<h2>勇者ゲーム</h2>
19<p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
20<img src = "img/work2.png" width="400" height="260" alt = "宝探しアイコン">
21<h2>宝探し</h2>
22<p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
23<img src = "img/work3.png" width="400" height="260" alt = "神経衰弱アイコン">
24<h2>神経衰弱</h2>
25<p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
26</body>
27</html>
28ード

上記のコードを実際にChrome上で動かした結果が以下に示す通りとなります。

スクリーンショットの通り、サンプルコードのを真似て書いているのに「ヘッダー画像」と「太郎のアイコン」が同じ行に出てしまいます。
また、ドットインストールの動画ではエディタ上で「楽しいアプリ」が改行されているのですが、私のエディタでは自動改行ができず醜くなってしまいます。自動改行の設定方法(?)、画像間での改行の仕方について教えていただけると助かります。