我正在使用我的wesite的移动版本，出于某种原因，我的内容标题旁边有一个正确的边距（请查看截图）。 Screenshot responsive 在chrome开发人员工具中，我检查了为什么背景在右侧可见，我可以看到正确的＆＃34;边缘＆＃34;在我的#wrapper里面。我怎样才能解决这个问题？已经尝试改变包装的宽度，但没有任何帮助。 谢谢！
这是我的HTML
<!Doctype html>
<html>
<head>
<title>Media Management</title>
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper" class="hidden-mobile">
<nav class="hidden-mobile" id="menue">
<div class="navItem">
<img src="./img/home_website.png" class="icon" id="homeicon"><br>
<a class="icontitle" id="current" href="./index.html">HOME</a>
<div class="after"></div>
</div>
<div class="navItem">
<img src="./img/studieninteressierte.png"class="icon"><br>
<a class="icontitle" href="./fotowand.html">STUDIEN-<br>INTERESSIERTE</a>
<div class="after"></div>
</div>
<div class="navItem">
<img src="./img/studierende.png" class="icon" id="studierendeicon"><br>
<a class="icontitle" href="">STUDIERENDE</a>
<div class="after"></div>
</div>
<div class="navItem">
<img src="./img/unternehmen.png" class="icon" id="unternehmenicon"><br>
<a class="icontitle" href="">UNTERNEHMEN</a>
<div class="after"></div>
</div>
<div class="navItem">
<img src="./img/kontakt.png" class="icon"><br>
<a class="icontitle" href="">KONTAKT</a>
<div class="after"></div>
</div>
</nav>
<div id="content">
<header>
<img src="./img/Burgermenü.png" class="only-mobile" id="burgermenue">
<a href="http://www.hs-rm.de/de/"> <img src="./img/hsrm_logo.png" id="hsrmlogo">
</a>
<div id="headertitel">
<h1>Media Management</h1>
<h2>Bachelor of Science</h2>
</div>
</header>
<main>
<div class="content">
<h1>Aktuelles</h1>
<h2>6. Karriere Forum Media Management</h2>
<p>
Am 17. Mai fand das sechste Karriere Forum Media Management statt - eine Veranstaltung des Studiengangs Media Management in Zusammenarbeit mit dem Competence & Career Center der Hochschule RheinMain. Den interessierten Studierenden bot sich ein vielfältiger Eindruck vom Einstieg in das Berufsleben und der täglichen -praxis.
Das Karriere Forum, moderiert von Prof. Dr. Christoph Kochhan, startete mit einem Vortrag von Hans Reitz (Geschäftsführer, circ GmbH & co. kg), der im Rahmen seiner spannenden Präsentation zum Thema Live Communication auch auf die Bedeutung der eigenen Persönlichkeitsentwicklung im Rahmen der Beruftätigkeit hinwies. Paul Herwarth von Bittenfeld (Product Owner, Seibert Media) stellte mit dem Kollegen Lukas Pfeifer (Consultant und Projektmanager) sowie der Kollegin Alisa Tietz (Product Marketing Managerin) die Arbeit in einer Media-Agentur mit ihren unterschiedlichen Aufgabenbereichen dar. Carla-Maria Balster, ehemalige Absolventin des Studiengangs Media Management, berichtete kurzweilig von ihrem Weg vom Studium an der Hochschule RheinMain zu ihrem jetzigen Job als Key Account Managerin bei Unitymedia.
Flankiert wurden die interessanten Vorträge von einer Vielzahl an Fragen der Studierenden. Die angehenden Media Managerinnen und Manager nutzten die Chance, im Rahmen der Veranstaltung wertvolle Impulse aus den Diskussionen mit den Referentinnen und Referenten mitzunehmen.
Für die siebte Auflage des Karriere Forums Media Management stehen erneut hochkarätige Experten zur Verfügung, um den Studierenden wichtige Einblicke in das spätere Berufsleben zu geben.
Am 17. Mai fand das sechste Karriere Forum Media Management statt - eine Veranstaltung des Studiengangs Media Management in Zusammenarbeit mit dem Competence & Career Center der Hochschule RheinMain. Den interessierten Studierenden bot sich ein vielfältiger Eindruck vom Einstieg in das Berufsleben und der täglichen -praxis.
Das Karriere Forum, moderiert von Prof. Dr. Christoph Kochhan, startete mit einem Vortrag von Hans Reitz (Geschäftsführer, circ GmbH & co. kg), der im Rahmen seiner spannenden Präsentation zum Thema Live Communication auch auf die Bedeutung der eigenen Persönlichkeitsentwicklung im Rahmen der Beruftätigkeit hinwies. Paul Herwarth von Bittenfeld (Product Owner, Seibert Media) stellte mit dem Kollegen Lukas Pfeifer (Consultant und Projektmanager) sowie der Kollegin Alisa Tietz (Product Marketing Managerin) die Arbeit in einer Media-Agentur mit ihren unterschiedlichen Aufgabenbereichen dar. Carla-Maria Balster, ehemalige Absolventin des Studiengangs Media Management, berichtete kurzweilig von ihrem Weg vom Studium an der Hochschule RheinMain zu ihrem jetzigen Job als Key Account Managerin bei Unitymedia.
Flankiert wurden die interessanten Vorträge von einer Vielzahl an Fragen der Studierenden. Die angehenden Media Managerinnen und Manager nutzten die Chance, im Rahmen der Veranstaltung wertvolle Impulse aus den Diskussionen mit den Referentinnen und Referenten mitzunehmen.
Für die siebte Auflage des Karriere Forums Media Management stehen erneut hochkarätige Experten zur Verfügung, um den Studierenden wichtige Einblicke in das spätere Berufsleben zu geben.
Prof. Dr. Christoph Kochhan, 18.05.2017
</p>
</div>
</main>
</div>
</div>
</body>
</html>
我的CSS：
html, body {
background-image: url("../img/steinwand2.jpg");
height: 100%;
margin: 0;
}
/*Flexbox*/
#wrapper {
display: flex;
height: 100%;
}
#menue {
flex: 0 0 10%;
height: 100%;
justify-content: space-around;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
#content {
flex: 0 0 90%;
flex-flow: column;
}
header{
background-color: green;
width: 100%;
height: 435px;
background-image: url("../img/baum.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 70% 70%;
justify-content: space-around;
align-items: flex-end;
}
main {
height:100%
}
/*Flexbox*/
/*Navigation*/
#burgermenue{
width:80px;
}
.icontitle{
text-align: center;
color: black;
text-decoration: none;
}
#current{
font-weight: bold;
}
#studierendeicon{
width:130px;
background-image: url('./img/studierende.png')
background-position: center center;
}
#unternehmenicon{
width:60px;
}
#homeicon{
width:70px;
padding-top: 3px;
}
.navItem {
text-align: center;
display: inline-block;
position: relative;
width:130px;
height: 140px;
}
.icon {
width:80px;
}
.after {
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
.navItem:hover {
background-color: rgba(0, 0, 0, .6);
transform: scale(1.2);
}
/*Navigation Ende*/
.content{
padding-top: 50px;
background: rgba(255, 255, 255, 0.6);
}
#hsrmlogo{
width: 250px;
position: relative;
left: 80%;
}
#headertitel{
position: relative;
text-align: center;
top:50%;
right:3%;
}
/*Media Queries*/
.only-mobile, .only-tablet, .only-tablet {
display: none;
}
@media (max-width:768px) { /*Smartphone*/
.hidden-mobile {
display: none;
}
.only-mobile {
display: block;
}
#burgermenue{
width:50px;
height:50px;
left:0;
top:0;
position: absolute;
bottom:100px;
z-index: 51;
}
#menue{
display: block;
text-align: center;
width: 100%;
position: absolute;
height:300px;
background-color: grey;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 50;
}
.navItem{
display: block;
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
color: white;
}
.icon{
display: none;
}
header{
display: flex;
width: 100%;
height:200px;
background-image: url("../img/baum.jpg");
}
#headertitel{
position: absolute;
right:50%;
top:15%;
font-size: 70%;
}
.content{
margin: 5px;
}
#hsrmlogo{
position: absolute;
top:1px;
left:250px;
width:200px;
}
@media (max-width:991px) and (min-width:769px){ /*Tablet*/
@media (min-width:992px) { /*Desktop*/
}
/*Media Queries Ende*/
答案 0 :(得分：0)
问题是以下规则：
#content {
flex: 0 0 90%;
flex-flow: column;
}
它使#content宽度达到其容器的90％。你看到的差距是剩余的10％。
我想你只希望该规则在桌面宽度上启动，因此解决问题的一种方法是将其包装在媒体查询中：
@media (min-width:769px) {
#content {
flex: 0 0 90%;
flex-flow: column;
}
}