私のウェブページが広すぎるのはなぜですか？

免責事項：私はこのサイトの最初の質問ですので、私の部分では礼儀の不足を指摘してください。また、私のコーディングで話題に関係のないポインタは、歓迎です。私のウェブページが広すぎるのはなぜですか？

私はいくつかの理由について

をポートフォリオページを構築していますし、私のページが応答させることを試みた（画像、テキスト、パディングなどにEMを使用して）、ページがあまりにも広く表示されます（右にスクロールする必要がありますコンテンツを中心にする）。誰かが私を正しい方向に向けることができますか？

次のように私のコードは次のとおりです。あなたが必要

<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
    <nav> 
    <!-- Start of Navigation --> 
    <div class="container-fluid"> 
     <ul> 
     <li id="name">Nathan King</li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#about">About</a></li> 
     </ul> 
    </div> 
    </nav> 
    <!-- End of Navigation/Start of Content --> 
    <div class="content"> 
    <div class="about"> 
    <!-- Start of About --> 
    <a id="about"></a> 
    <h2>Enter text about my education and skills<h2/><img src="https://preview.ibb.co/i1JZv6/me.jpg" class=".img-responsive"> 
    </div><!-- End of About/Start of Portfolio --> 
    <div class="portfolio" id="portfolio"> 
    <h1>Portfolio</h1> 
    <div class="row"> 
     <div class="photo span4"></div> 
     <div class="photo span4"></div> 
    </div> 
    <div class="row"> 
     <div class="photo"></div> 
     <div class="photo"></div> 
    </div> 
    </div> 
    <!-- End of Portfolio/Start of Contact --> 
    <div class="contact"> 
    <a id="contact"></a> 
    <h2>Contact me:</h2> 
    <div id="soc-btn"> 
     <a href="https://www.facebook.com/#" class="fa fa-facebook" target="_blank"></a> 
     <a href="https://twitter.com/#" target="_blank" class="fa fa-twitter"></a> 
    </div> 
    </div> 
</body>

はCSS

body { 
    margin: 0 auto; 
    padding: 0; 
    background-color: #ccccff; 
    width 100%; 
} 
nav { 
    margin: 0 auto; 
    padding: 0 auto; 
    width: 100%; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #9099a2; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    width: 100%; 
} 
li { 
    display: inline; 
    float: right; 
} 

nav a { 
    text-decoration: none; 
    font-family: arial; 
    display: block; 
    padding: 1em 0.5em 1em 0.5em; 
    color: white; 
    width: 5em; 
    text-align: center; 
} 
nav a:hover { 
    opacity: 0.7; 
} 
nav a.active { 
    background-color: #63799d; 
    font-weight: bold; 
} 

#name { 
    float: left; 
    font-family: arial; 
    padding: 1em 0.5em 1em 1em; 
    color: white; 
} 
.content { 
    margin: 0 auto; 
    padding: 0 auto; 
    width: 100%; 
} 

.about { 
    padding: 4em 2em 2em 2em; 
    margin: 0 auto; 
    background-color: #6d7993; 
    width: 100%; 
} 

.about h2 { 
    text-align: center; 
    color: #d5d5d5; 
} 
.about img { 
    height: 9em; 
    width: 9em; 
    border-radius: 50%; 
    margin-top: 1em; 
} 

h1, 
h2, 
p { 
    font-family: calibri; 
} 

.portfolio { 
    padding: 4em 2em 4em 2em; 
    margin: 0 auto; 
    background-color: #d5d5d5; 
    text-align: center; 
    height: 100%; 
    width: 100%; 
} 
.portfolio h1 { 
    color: Black; 
} 

.photo { 
    width: 10em; 
    height: 5em; 
    background-color: #6d7993; 
    padding: 4em; 
    margin: 4em; 
    display: inline-block; 
    border-radius: 1em 4em 1em 4em/2em 1em 2em 1em; 
    -moz-border-radius: 1em 4em 1em 4em/2em 1em 2em 1em; 
    -webkit-border-radius: 1em 4em 1em 4em/2em 1em 2em 1em; 
} 

.contact { 
    padding: 4em 2em 4em 2em; 
    background-color: #96858f; 
    color: #d5d5d5; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
} 

.soc-btn { 
    margin: 0 auto; 
} 

.fa { 
    padding: 20px; 
    font-size: 30px; 
    width: 30px; 
    text-align: center; 
    text-decoration: none; 
    margin: 5px 2px; 
    border-radius: 50%; 
} 

.fa:hover { 
    opacity: 0.7; 
} 

.fa-facebook { 
    background: #3b5998; 
    color: white; 
} 

.fa-twitter { 
    background: #55acee; 
    color: white; 
}

出典

2017-11-24 atman_lens

：

* { 
    box-sizing: border-box 
}

それがWebページを告げるように、これは、応答性のデザインのために不可欠ですエレメントの全幅と高さにパディングとボーダーを含めるまでt。これを追加すると、ページが正常に表示されます。

この記事のオンラインhereはこれを非常によく説明しています。

ここにあなたのウェブページを見てみましょう：https://jsfiddle.net/tfr8f8az/

を*ターゲットすべての要素。

出典

2017-11-24 18:13:26 davvv

あなたはそれが何をし、どの要素がHTMLで修正されたのか説明すれば、OPを助けるでしょう。つまり、リンクがありますが、関連する部分を答えにコピーする必要があります。 –

チャームのように働いて、ありがとう！ –

私のウェブページが広すぎるのはなぜですか？

答えて

関連する問題