因為考慮到網頁會出現在電腦、智慧型手機、平板電腦等，且他們的螢幕大小皆不相同，為了確保顯示結果，我們可以變更瀏覽器的寬度來確認:

我們可以發現，瀏覽器比較窄的時候，主圖片會超過瀏覽器畫面。

而瀏覽器比較寬的時候，文章會過長而造成讀者難以閱讀。

• 調整圖片的寬度
  在選擇器「.mainvisual img」加上「max-width:100%」、「heigght:auto;」指定圖片的最大寬度並保持長寬比:

.mainvisual img{
    max-width:100%;
    height:auto;
}

max-width屬性可以防止元素的寬度比指定的值還大，height是指定元素高度的屬性，若設定為「height:auto」則依照元素的狀況自動設定高度。

這樣一來就解決了主圖片會超過瀏覽器的問題。

• 調整內容文字的寬度
  在選擇器「#profile」指定max-width:600px;屬性:

#profile{
max-width: 600px;
}

卻發現背景色也跟著調整了:

因此我們要打開HTML檔來做一些設定。
在簡介的article內側加上div標籤並指定class屬性為inner:

<article id="profile"><div class="inner">
        <h2>簡介</h2>
        
            <p>「飛向宇宙，浩瀚無垠」。<br>
    故事發生在一個遙遠的外太空，巴斯是一名厲害的太空騎警，在一次的任務中，因為自己的失誤而造成整個太空騎警團被困在外星球裡。肩負重任的巴斯一心只想進行超速飛行測試，趕緊帶隊員們回家，但卻在一次又一次的超速飛行測試下，熟悉的隊員、朋友們漸漸蒼老並死去，然而他依舊強打精神繼續出動，但再次返回基地時，整個宇宙已經不是他所熟悉的了，究竟巴斯會如何面對所有發生的事情，近而成為傳奇英雄—太空騎警巴斯光年呢？
            </p>
   </div> </article>

並開啟CSS檔，在選擇器「#profile.inner」指定max-width屬性，並使用margin屬性讓內容置中:

#profile.inner{
    max-width: 600px;
    margin:0 auto;
}