<div>が４個 </div>2個 なので、つりあっていません！？

以下のプログラムはHTMLのプログラムの抜粋です。
<div>４個：</div>２個の割合です。
この場合
<div>３個：</div>３の割合で丁度つり合いがが取れます。
　なので、どこか一か所<div>~</div>に変更しないといけないです。
私は、著書でCSS関連を学んでいる途中なので、初心者であり、参考書通りに、
転記したのかも疑問もあります。
取り分け、以下のプログラムですが！もし、</div>に変更する場合、何処を
変更すればいいでしょうか？　現在プログラムが著書通りに動いてくれいません
ので、原因としては</div>のバランスが取れていないのからだろうと思っています。
よろしくお願いいたします。
--------------------------------------------------
<div id="wrap"
<div class="content">
<div class="main-center">
<h1>About</h1>
<p>SNAPPERS代表、織姫　彦星のプロフィールや経歴の紹介ページです。</p>
<section class="profile clearfix">
<div class="profile-txt">
<h2 class="icon">Profile</h2>
<p><span>SNAPPERS 代表:織姫　彦星</span><br>アナログ、デジタルを問わず、トイカメラやぽらポラロイド、ビデオカメラに至るまで、あらゆるカマラに夢中になって遊んでいるうちに自然とカメラマンとして道を志すようになる。</br>大学卒業後、有名なカメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影する中で、現在のアウトアカメラマンとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映画作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
</div>
<img src="images/about-profile.png" alt="織姫　彦星プロフィール画像"class="profile-image">
</section>
<section class="career">
<h2 class="icon">Caree and job history</h2>
<table>
<tr>
<th>1944年3月</th>
<td>〇▽角形芸術大学写真家　卒業彦星写真研究所に入社、彦星英明氏に師事</td>
</tr>
<tr>
<th>2012年3月</th>
<td>彦星写真研究所を退社して欧米、世界各国を放浪しながら撮影を続ける</td>
</tr>
<tr>
　<th>2012年8月</th>
<td>イタリア・ミラノで開催されたコンクールにて、審査特別賞受賞</td>
</tr>
<tr>
<th>2016年１月</th>
<td>帰国し「SNAPPERS」を設立</td>
</tr>
<tr>
<th>2016年4月</th>
<td>Aichi Musimにて初の写真展「Snap!Snap!」を開催</td>
</tr>
</table>
</section>
</div>

質問者からの補足コメント

• 

  ＃２さんのご回答を参考にさせていただきました。
  BracketsのテキストエディタのAIがあるのかな？
  以下の２個が</div>が二個しかありませんが、マウスオーバー
  した場合、色が変化なしで、反応がないです。
  なので！
  <div id="wrap">
  <div class="content">
  分をどこかに、追加しないといけないと思います。
  ちなに！
  最後の
  </section>
  </div>
  ですが！
  　</section>
  </div>
  </div>
  </div>
  としましたが、追加した</div>が
  通常の青文字ですが！赤文字に変化するので
  位置的には違っていると考えられます。
  　＃２さんのご指摘通り、著書の間違い
  かもしれませんが！？
  もう少し検討してみます。

  No.1の回答に寄せられた補足コメントです。 補足日時：2019/07/07 15:56

• 

  <div id="wrap"><--cssプログラムへ伝達するidなので、これは全体対する命令-->
  <div class="content"><--上記のidと同様-->
  <div class="main-center"><--上記のidと同様-->
  中略
  (ゆえに全体に対するプログラムなので、その為には最後に</div>としないと辻褄が合わなくなる)
  　</section>
  </div>
  </div>
  </div>
  　検証していませんが！以上、結論付けました。

    補足日時：2019/07/08 07:30

No.1 ベストアンサー 回答者： naokita 回答日時： 2019/07/07 08:29

※ 先の質問から誘導された前回答者の#4です。

記載されたHTMLからだけで判断すると、
最後の</div>の下に、不足分の</div>を２つを追加するしかないです。
～～～～
</table>
</section>
</div>
</div>
</div>
とします。ただし、
HTMLの文法上これは消去法で、HTMLとしての辻褄をあわせただけの話です。
<section>の存在を考えると途中に、</div>を入れる事はありえないから・・・
で、
思い通りにならないのは、そのせいだけではなくて、
１行目の
<div id="wrap"
これがが大原因（ミス）です！
<div id="wrap">
に正しいHTMLに↑↑変更しましょうね。
その上で、
不足分の</div>を２つを追加する！という事になります。

もし、それで意図しない表示になるのなら、HTMLの構造を最初から見直す（作り直す）か、CSSの適用が出来ていないのでしょう・・・

この回答へのお礼

再度、ご回答くださいましてありがとうございました。
ご指摘通りに>を追加したところ
私が使っている、著書が推進しているBracketsのテキストっディタ
では>を追加した瞬間に</div>が以下通り自動的に追加されました。
<div id="wrap"></div>
従って</div>１個追加されましたので！残り
あと１個</div>をどこかに追加しないと、いけないです。
ちなみに、</div>を１個追加しただけで、
文字の[SNAPPERS 代表:織姫　彦星</span><br>アナログ、
デジタルを問わず、・・・]の文字のbakkuguranndoが今まで
白色でしたが、透明になりました。
著書は、白ですが！著書と文字の位置が違っています。
もう少しです。
ちないみ！
　<div class="content">
<div class="main-center">
ですが、これに対して、１個</div>
を追加しないといけに気がします。

お礼日時：2019/07/07 14:59

No.3 回答者： naokita 回答日時： 2019/07/07 17:58

#1です　お礼拝見済み

＞<div id="wrap"></div>
＞従って</div>１個追加されましたので！残り
A,
いいえ！
数合わせじゃないんだから・・・

それは貴方のテキストエディタが勝手に、
<div id="wrap">の次に</div>を補完してくれただけの話です。
それは意味の無い事なので、
テキストエディタを使わない想定なのに、勝手に補完されたら別物のHTMLになるでしょｗ
なぜ、それを削除して戻さないの？・・・・

１行目はこれだけにする事
<div id="wrap">

あとは分かりますよね。
また-1するから、元に戻って２つ不足 → 最後に+２つ足す

No.2 回答者： lv4u 回答日時： 2019/07/07 09:08

No.1さんの回答にあるように、先頭のdivが怪しい。

初心者が真面目に勉強しようと、ネットじゃあなく、入門書籍を買ってサンプルを入力して勉強しようとします。
でも、安めの入門書の中には、書籍にするときの手違いか、古いエラーありのソースを使ったのか、ソースコードに間違いがいくつも入っていることがあります。

初心者なので、「自分が間違っているんだろう」と思っていろいろと調べていくうちに、書籍のほうが間違っているって分かることも良くあります。

私の場合も、何度もそういう経験がありますから・・・。

ちなみに、Visual Studioなど、最新の開発環境でhtmlを入力していると、「このdivが閉じてないよ」っていう警告が出るので、なにかがおかしいとすぐ分かります。
また、最新のVisual Studioは、AI機能を取り入れて、「ここはこの変数名が候補ですよ」と表示されたりしてくれる嬉しい機能が追加されたようです。

また、「実務には使わないで！」という警告付きだけどマイクロソフトでオープンソースとして開発している技術があります。
これを使うと、Webでは必須知識だったJavaScript言語が不要となり、その個所はC#で開発可能になるそうです。

まあ、初心者にとっては、C#もJavaScript以上に習得が難しいかもしれないけど・・・。

この回答へのお礼

ご回答くださいまして、ありがとうございました。
私もPHPの本を購入しまして、１８０ページやりましたが！
プログラムが著書の通りに動かなくなりました。
アマゾンで、評価を見たら、その本ですが、慶応義塾大学工学部の
高学歴者がお書きになった著書でしたが、この本は検証されていない
との評価がありました。確かに、最後はバグでした。
　同サイトにだいぶ書き込みをしましたて、著書が可笑しいというとこになりました。
質問している著書ですが！
[HTML&CSSとWebデザイン]
https://gihyo.jp/book/2017/978-4-7741-9064-8
です。
なかなか評判がいい本でしたので購入しました。
ちなみに、プログラムにバグがある？
ヨドバシカメラとアマゾンと読書メーター
評価を見ましたが
divによるバグの報告がありませんでしたので！
まだ何とも言えないところです。

お礼日時：2019/07/07 16:24