2
私のコードからわかるように、私は初心者のWebデザイナーです。
私はCSSグリッドを学び、それを私のウェブサイトに実装しようとしています。私は、ナビゲーションバーを2番目と3番目のグリッド列とdsm instagramプラグインを使用して、次の行の3つのグリッド列すべてを使用するようにしています。しかし何らかの理由でnavbarが2番目の列を使用していて、プラグインが3番目の列をすべて同じ行に使用しています。すべてのツリーグリッド列を使用するプラグインを取得できません
body {
margin: 0px;
padding-left: 10%;
width: 80%;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
}
.logo {
grid-columns: 1/2;
width: 200px;
}
.main-nav {
grid-columns: 2/4;
display: grid;
grid-template-columns: repeat(6, 1fr);
padding-top: 20px;
}
/*gets rid of bullet points*/
ul {
list-style: none;
}
.main-nav li a {
text-decoration: none;
all: unset;
font-family: 'raleway', sans-serif;
font-size: 1em;
color: #a08b13;
}
.dsm-instagram-feed {
grid-columns: 1/3;
grid-rows: 2/3
}
}
.contact-box {
border: 3px solid #a08b13;
}
/* Change the link color to #111 (black) on hover */
.contact-box:hover {
background-color: black;
color: #ffffff;
}<link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
<div class="grid">
<div class="logo">
<a href="hairbychaya.html"><img src="cmc_logo.jpg" class="logo"></img>
</a>
</div>
<nav>
<ul class="main-nav">
<li> <a href="hairbychaya.html">HOME</a></li>
<li> <a href="about.html">ABOUT</a></li>
<li> <a href="gallery.html">GALLERY</a></li>
<li> <a href="survices.html">SERVICES</a></li>
<li> <a href="blog.html">BLOG</a></li>
<li class="contact-box"> <a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<div class="dsm-instagram-feed" data-embed-id='3818'></div>
<script src='https://www.displaysocialmedia.com/app/embed/instagram-feed/widget.js'></script>
私は今、自分の投稿を編集し、ちょうどあなたの「P.S.」に返信します。 [良い質問をどうやってどうやるのですか？]（https://stackoverflow.com/help/how-to-ask）と[最小限で完全で検証可能なサンプルを作成する方法]（https：// stackoverflow.com/help/mcve）？あなたのコードはバグです。バグを修正すればあなたの問題を解決できるかどうかは分かりません。より良いformatedを投稿しようとします。 CSSとHTMLに関するいくつかの非常に基本的な話をしてください。とにかく良い質問です！ – Axel
@Axel「あなたのコードはバグだ」という意味を説明できますか？私は経験不足のコードにバグを見つけることは本当にできません。あなたがバグを考えるのを助けることができますか？ – prog
私はバグを残しました。あなたの投稿に最初の編集をしたとき。彼らは問題の一部であるかもしれないと思ったので、私は意図でそうしました。 @kukkuzはこれらのバグをすべて修正しました。リビジョン履歴を見てください（最後のエディタ「編集したxyz時間前」の上にあるリンクをクリックしてください）。さらに、https：//html5boilerplate.comをご覧になることを強くお勧めします。ボイラープレートとあなたのマークアップを比較してください。あなたは非常に基本的な間違いを犯した。また、https：//validator.w3.orgを使用して、マークアップを検証することもできます。 – Axel