0
HTMLとCSSだけを使用して練習サイトで作業していますが、4つのdivのグループの下に2つのdivがある問題が発生しましたそれらに適用されたCSS値の見知らぬ人でも、私が開発ツールを使用してそれらを見ると、inspectモードでは強調表示されませんが、それらの上のコンテンツのdivは行います。div要素に背景色が適用されない
HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>A Very Goochy Site</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<Meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="header">
<header>
<img src="img/Abigail_Max_small.jpg" alt="Placeholder for logo">
<div id="linksOnly">
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="portfolio.html">Portfolio</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
<div id="content">
<h1>Gooch Website</h1>
<div id="intro">
<img src="http://baconmockup.com/750/200" alt="Placeholder Image" id="mainImage">
<p>Bacon ipsum dolor amet drumstick ham hock short ribs ribeye, filet mignon boudin pork loin tail. Burgdoggen cupim venison, doner tail corned beef bacon alcatra kevin. Ham hock frankfurter t-bone ground round rump chuck pork shank landjaeger. Shank tri-tip burgdoggen, strip steak turducken filet mignon cow ham corned beef. Pork belly swine chuck ham hock doner jowl cow sausage chicken beef ribs. Ground round jerky meatloaf ham hock doner ham. Burgdoggen cow capicola swine venison bresaola brisket spare ribs.</p>
</div>
<div id="why">
<img src="img/editor.svg" alt="Editor" class="section-icon">
<h2>Why you need a professional website</h2>
<h3>First impressions are everything.</h3>
<p>Your website is the first impression most people will get of your business. With an ever-increasing availabillity of smartphones, customers are able to look up a business in seconds and decide immediately whether or not they are interested in doing business with you. First impressions are important when trying to attract new clients!</p>
<h3>We do all the heavy lifting.</h3>
<p>We take the hard work out of owning a beautifully designed website. Building a website can be complicated and time consuming. Let us do it for you! We will walk through the entire process with you from the early stages of sitting down to talk about your needs, to the final stages of your business' beautiful site going live for the world to see.</p>
</div>
<div id="responsiveDesign">
<img src="img/smartphone.svg" alt="Responsive Web Design" class="section-icon">
<h2>Responsive Design</h2>
<p>Drumstick meatloaf pastrami short loin. Flank pancetta ribeye ham hock pork. Ball tip alcatra tongue, beef salami biltong ham strip steak. Alcatra short ribs bresaola fatback. Leberkas tongue ham hamburger kevin tail. Cupim strip steak sausage filet mignon picanha.</p>
</div>
<div class="grow">
<img src="img/store.svg" alt="Watch your business grow!" class="section-icon">
<h2>Increase Business</h2>
<p>Ball tip frankfurter leberkas, filet mignon tri-tip alcatra turkey. Pork belly porchetta bresaola venison salami jowl. Salami venison pastrami andouille tri-tip beef. Capicola landjaeger jerky, chuck venison kevin leberkas bresaola shank ribeye drumstick. Landjaeger shoulder alcatra chuck. Spare ribs pork belly short loin, hamburger venison pork loin porchetta alcatra flank sausage t-bone shoulder. Tail swine turkey corned beef, andouille porchetta meatball brisket alcatra strip steak biltong bacon prosciutto picanha.</p>
</div>
<div id="seo" class="seo">
<img src="img/binoculars.svg" alt="Show up in all the right places" class="section-icon">
<h2>Search Engine Optimization</h2>
<p>Short ribs salami doner leberkas, meatball tri-tip shankle boudin ball tip drumstick pig ham hock venison andouille tail. Prosciutto boudin frankfurter pork chop beef ribs leberkas beef cupim venison ground round shank. Pork belly cupim tenderloin spare ribs ham hock t-bone boudin rump sausage porchetta tail. Alcatra turkey pork ham hock.</p>
</div>
</div>
</div>
<div id="footer">
<footer>
<div id="socailMedia">
<img src="img/facebook.svg" alt="Contact us on Facebook">
<img src="img/google-plus.svg" alt="Contact us on Google+">
<img src="img/twitter.svg" alt="Contact us on Twitter">
<img src="img/instagram.svg" alt="Contact us on Instagram">
</div>
<p>Ben and Abigail Gooch 2016<span id="copywrite">©</span></p>
</footer>
</div>
</body>
</html>
はCSS：
/***********************************/
/* Overall Styles */
/***********************************/
* {
box-sizing: border-box;
}
html {
width: 100%;
background: #6BD9EC;
//background: #e8ffbc;
font-family: helvetica;
}
h1 {
margin-top: 0px;
}
/***********************************/
/* Layout */
/***********************************/
#content {
background-color: #fff;
//background-color: #6BD9EC;
padding: 0 1em;
}
#wrapper {
min-height: calc(100vh - 54px);
}
/***********************************/
/* Top Bar/Nav */
/***********************************/
#header {
padding: 20px;
background-color: #A0DA30;
width: 100%;
border-bottom-color: #fff;
border-bottom-width: 10px;
border-bottom-style: solid;
box-shadow: 10px 10px 5px #4BB9CC;
margin-bottom: 20px;
}
nav {
text-align: center;
}
nav ul li a {
background-color: #6BD9EC;
color: white;
margin: 15px 0;
padding: 10px 15px;
border-radius: 15px;
border-color: #fff;
border-width: 2px;
border-style: solid;
display: block;
font-size: 1.3em;
}
nav li a:hover{
border-color: orange;
border-width: 4px;
box-shadow: 5px 10px 5px #80BA10;
}
header img {
display: block;
margin: 0 auto;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: #fff;
}
#header ul {
padding-left: 0;
}
/***********************************/
/* Main Content */
/***********************************/
#mainImage {
margin: 0 auto 40px auto;
display: block;
max-width: calc(100vw * .8);
border-radius: 20px;
}
#content {
border-radius: 15px;
box-shadow: 10px 10px 5px #4BB9CC;
padding-bottom: 15px;
margin-bottom: 20px;
}
#content p {
display: block;
font-size: 1.25em;
max-width: 80%;
margin: 0 auto;
}
h1,
h2,
h3 {
display: block;
text-align: center;
}
.section-icon {
max-height: 200px;
max-width: 200px;
display: block;
margin: 100px auto 40px auto;
}
/***********************************/
/* Footer */
/***********************************/
#footer {
width: 100%;
//max-height: 50px;
background: #A0DA30;
//padding: 15px;
//margin: 0px;
text-align: center;
font-size: .75em;
font-family: helvetica;
border-top-style: solid;
border-top-width: 10px;
border-top-color: #80BA10;
display: block;
}
footer p {
display: inline-block;
height: 30px;
margin: 5px 0 0 0;
}
#copywrite {
vertical-align: super;
}
#socailMedia {
display: block;
}
footer img {
margin-left: 8px;
max-width: 40px;
max-height: 40px;
border-radius: 8px;
}
/***********************************/
/* Media Queries */
/***********************************/
@media (min-width: 769px) {
#content {
width: 70%;
max-width: 2000px;
margin: 0 auto 20px auto;
}
nav,
nav ul,
nav ul li,
nav ul li a {
display: inline-block;
text-align: center;
margin: 0 10px;
}
nav a {
min-width: 200px;
font-size: 1.5em;
font-weight: bold;
}
#header img {
display: inline;
margin-bottom: 15px;
}
#header {
margin: 0 auto 20px auto;
}
#linksOnly {
text-align: center;
margin-top: -80px;
margin-bottom: 20px;
}
#footer {
max-height: none;
}
footer p {
display: block;
}
#socailMedia {
display: inline;
padding-top: 10px;
}
.seo {
display: inline;
margin: 0 auto;
max-width: 50%;
//background-color: rgba(217,228,234, .5);
}
.grow {
display: inline;
margin: 0 auto;
width: 50%;
//background-color: rgba(217,228,234, .5);
}
}
'why'要素のスタイルの宣言が表示されません –
コードを[mcve]に減らしてください。それはボランティアに櫛をかけるように頼んでいるコードの多くです。 –
あなたの質問にデモリンクを追加すると： - https://jsfiddle.net/e2p16ckx/ – oqx