0
サイトを縮小したり、モバイル/タブレットで表示すると、右側にこの余白/空白がすべてあり、#mainセクションのテキストコンテンツがカットされます。なぜこれが起こっているのですか？それをどうすれば正しくスケールすることができますか？私は、何も解決しなかった様々な部分に隠れたオーバーフローを試みました。私は余白をゼロにし、パディングをすることを試みました。私はそれを正確に拡大し、右側の余白/スペースを取り除く方法を確信しています。ヘッダー、ナビ、#mainセクションのみがまだありません。 は、事前にご協力いただきありがとうございサイトが適切に縮尺されていない
HTML：
<body>
<header id="main-header">
<div class="container">
<h1 class="display-4">.Richardson</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="my-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section id="main">
<div class="container">
<div class="col-md-8" id="welcome-text">
<h1 class="display-4">Welcome</h1>
<hr class="rule">
<p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
<p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
</div>
</div>
</section>
<section>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
</section>
css:
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin:auto;
overflow: hidden;
}
img {
min-width: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica", "geneva", sans-serif;
}
p {
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2.5rem;
}
a {
color: #4e0250;
}
a:hover {
text-decoration: none;
background-color: gray;
padding: 10px;
color: #D3D3D3;
border-radius: 20px;
}
#main-header {
background: #4E0250;
color: silver;
text-align: center;
position: sticky;
top: 0;
right: 0;
z-index: 1;
}
#navbar {
text-align: center;
background-color: #D3D3D3;
color: #4e0250;
font-size: 1.4rem;
z-index: 1;
}
#navbar ul {
padding-left: 65px;
}
#navbar ul li {
text-align: center;
list-style: none;
padding-right: 40px;
display: inline;
}
#navbar {
position: fixed;
width: 100%;
}
#navbar .my-nav {
margin: 15px;
}
#main {
padding-top: 5rem;
background: url('../img/headon3.jpg') center center no-repeat;
background-size: cover;
min-height: 757px;
overflow: hidden;
}
#main .container {
margin-top: 55px;
margin-left: 150px;
}
#main #welcome-text {
background-color: rgba(92, 92, 92, 0.9);
color: #D3D3D3;
padding: 0 20px;
border-radius: 10%;
padding-bottom: 5px;
min-width: 40%;
}
#main h1 {
padding-top: 20px;
}
.rule {
border-top: 1px solid floralwhite;
padding-bottom: 10px;
}