这是我网站项目的代码。当我执行它时，浅蓝色条将以文本为中心，但是它不是水平进行，而是垂直进行。我真的希望它可以水平进行，有点像YouTube横幅。
这就是目前的样子：https：//gyazo.com/bec50dc13260d0c3b572f5555555555555555555555555C12C
我不希望它看起来像这样。我不希望它看起来像塔楼或建筑物。我希望它像地板或天花板一样水平进行。
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
top: 50%;
left: 50%;
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
.intro {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
justify-content: center;
display: flex;
align-items: center;
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
color: white;
font-size: 100px;
padding: 10px;
line-height: 1.8em;
}
.secondbg {
background-image: url("circuit.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
justify-content: center;
display: flex;
align-items: top;
}
.barofcolour {
top: 50%;
left: 50%;
background-color: lightblue;
background-position: 0% 25%;
background-size: ;
background-repeat: no-repeat;
border: 2px;
} <body>
<div class="navigation">
<a class="active" href="#home">Home</a>
<a href="#aboutMe">About Me</a>
<a href="#careers">Careers</a>
<a href="#contactUs">Contact Us</a>
<a href="#webDev">Web Development</a>
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="secondbg">
<div class = "barofcolour">
<div class="courseinfo">
<h2>About This Course
</h2>
</div>
</div>
</div>任何帮助将不胜感激：）。
在您的 barofcolour 类中，只需设置属性width:100%即可。应该解决这个问题！
我已经在此codepen
中添加了它希望这可以回答您的问题！
i删除了显示：从.secondbg flex之后，H2的余量是一个差距，我减少了字体，因此您可以看到差异
h2{
margin:0px;
text-align:center;
}
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
top: 50%;
left: 50%;
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
.intro {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
justify-content: center;
display: flex;
align-items: center;
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
color: white;
font-size: 70px;
padding: 10px;
line-height: 1.8em;
}
.secondbg {
background-image: url("circuit.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
justify-content: center;
align-items: top;
}
.barofcolour {
padding:10px;
top: 50%;
left: 50%;
background-color: lightblue;
background-position: 0% 25%;
background-size: ;
background-repeat: no-repeat;
border: 2px;
}<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
<a href="#aboutMe">About Me</a>
<a href="#careers">Careers</a>
<a href="#contactUs">Contact Us</a>
<a href="#webDev">Web Development</a>
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="secondbg">
<div class = "barofcolour">
<div class="courseinfo">
<h2>About This Course
</h2>
</div>
</div>
</div>