我真的需要有人来帮助我解决这个问题:我正在使用flexx建立一个响应式网页，但是当我调整大小到较小的屏幕尺寸时，所有的内容都失去了全宽度，我得到了一个"空白"在右边。我试过用媒体查询来修复它。
*, html, body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background-color: #2F2D52;
text-align: center;
}
nav {
display: -webkit-flex;
flex-wrap: -webkit-wrap;
justify-content: center;
gap: 3em;
flex-direction: column;
width: 100%;
background-color: #5E5B8C;
}
nav ul {
display: inline-flex;
justify-content: space-around;
}
ul {
width: 100%;
}
nav ul li {
list-style: none;
margin-bottom: .5rem;
}
ul li a {
color: #F5F5F5;
font-size: 1.3rem;
}
ul li a:hover {
color: #BCFCB1;
}
h1 {
margin-top: 1rem;
letter-spacing: .2rem;
font-size: 3rem;
font-family: 'Diplomata', cursive;
color: #F5F5F5;
}
@media only screen and (max-width: 479px) {
nav {
}
nav ul {
display: none;
}
h1 {
margin: auto;
font-size: 1.7rem;
}
}
.banner {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-image: url(space.jpg);
background-size: cover;
padding: 14rem 0 14rem 0;
}
.experience {
display: block;
line-height: 3.5em;
text-align: center;
width: 100%;
background-color: rgba(245, 245, 245, .6);
}
h2 {
letter-spacing: .1rem;
font-style: oblique;
font-family: sans-serif;
font-size: 2rem;
margin-top: 1rem;
}
.experience h3 {
font-style: oblique;
font-size: 1.3rem;
margin-bottom: .5rem;
}
button {
height: 2em;
width: 7em;
margin-bottom: -20rem;
background-color: #F5EAE4;
color: #2F2D52;
font-size: 2.5rem;
font-weight: bold;
letter-spacing: .2rem;
border: .1rem solid #5E5B8C;
border-radius: 1rem;
box-shadow: .3rem .3rem;
}
button:hover {
background-color: #BCFCB1;
color: #5E5B8C;
cursor: pointer;
}
main {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
gap: 1.5rem;
width: 100%;
}
main h2 {
color: #F5F5F5;
}
.video {
margin: 5rem auto;
}
h5 {
line-height: 1.7em;
font-size: 1.3rem;
letter-spacing: .1rem;
color: #F5F5F5;
}
h4 {
color: #F5F5F5;
font-size: 1.4rem;
border: 1px solid #F5F5F5;
width: 20em;
margin-top: 2em;
padding-top: .5em;
padding-bottom: .5em;
}
.programs {
width: 100%;
margin-top: 2em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3em;
align-items: center;
justify-content: space-around;
}
.space {
display: flex;
flex-direction: column;
}
.space img {
width: 20rem;
height: 16rem;
}
span {
color: #F5F5F5;
align-self: center;
font-size: 1.3rem;
font-weight: 500;
margin-top: 2.5rem;
border: 1px solid #F5F5F5;
padding: .5em .5em .5em .5em;
}
span:hover {
background-color: #F5F5F5;
cursor: pointer;
color: #2F2D52;
}
@media only screen and (max-width: 1038px) {
.space {
flex-direction: column;
}
span {
margin: 2.5em auto;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata&display=swap" rel="stylesheet">
<title>Aero Space Solutions</title>
</head>
<body>
<nav>
<h1>Aero Space Solutions</h1>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Missions</a></li>
<li><a href="#">Our Programs</a></li>
</ul>
</nav>
<div class="banner">
<div class="experience">
<h2>Aero Space Experience</h2>
<h3>Going above the limits and taking you to the unknown and beyond!</h3>
</div>
<button type="button" name="button">Explore</button>
</div>
<main>
<h2>Our Programs</h2>
<h5>Discovering new paths and setting new ways to ride into the unknown and discover deepest secrets kept in Universe.</h5>
<h4>Choose the solution you are interested in</h4>
<div class="programs">
<div class="space shuttle"><img src="spacecraft.jpg" alt="spacecraft">
<span>Space Shuttle Solutions</span>
</div>
<div class="space rocket"><img src="spacerocket.jpg" alt="spacerocket">
<span>Space Rocket Solutions</span>
</div>
<div class="space station"><img src="spacestation.jpg" alt="spacestation">
<span>Space Station Solutions</span>
</div>
<div class="space shuttle"><img src="solar.jpg" alt="spacecraft">
<span>Space Solar Solutions</span>
</div>
</div>
</main>
输入图片描述
这是它的图片!所以，我已经为此挣扎了很长时间。我试着添加位置，媒体，然后重新开始，看看问题发生在哪里，但我无法解决它。我真的希望有人能帮我解决这个问题。
您可以通过使用媒体查询简单地做到这一点这只是告诉浏览器，当屏幕尺寸小于600px时，媒体查询中的所有样式将被应用
@media screen (max-width: 600px) {
.element {
width: 100vw;
}
}我找到的解决方案是使下一个内部项目的宽度为100%，使其在全宽度
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-4">
<div class="icon-box w-100">
<div class="icon"><i class="fa fa-balance-scale"></i></div>
<h4 class="title"><a href="/url">Some text here</a></h4>
<p class="description">some text here</p>
</div>
</div>
用于bootstrap 4.x
- 顶部封闭div.align-items-stretch使兄弟姐妹的身高相同。
- 内部icon-box.w-100使外部div 100%