英文:
Why is this background color cut off on the edge sides and the colors are only applied on the center?
问题
背景颜色一致性问题：
我知道我的代码肯定有一些布局问题。但是，只是为了解释我目前正在努力解决的问题，背景颜色（带有两种不同颜色的背景颜色模式）并没有完全填充到左右两侧的边缘，而颜色仅填充在中心空间。
参考：请查看这个图片：
[1]: https://prnt.sc/zf8bIJGu-iDK
[2]: https://prnt.sc/td47mQeiibvR
我尝试了很多方法，如在每个父节中使用width:100%;并移除margin: auto;等等...但是到目前为止没有解决这个问题...
我的当前代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyungHwan Hong</title>
<link rel="stylesheet" href="./style.css">
<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=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="top-header-bar">
<a href="#" class="logo">Lorem<span>Ipsum</span></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div class="home">
<div class="home-left">
<p>Not only a web developer but also,</p>
<h1>A Problem Solver</h1>
<p class="line-3-spacing">For Your Business</p>
<a href="#" class="btn">Hit Me Up!</a>
</div>
<div class="home-right">
<img src="./Images/placeholder img banner.png" alt="MyungHwan Hong Web Developer, Full Stack Developer, Software Engineer">
</div>
</div>
</header>
<main>
<section class="about-me">
<div class="about-heading heading">
<h2>About Me</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="about-details">
<div class="about-details-left">
<h3>Get To Know Me!</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor...</p>
</div>
<div class="about-details-right">
<h3>My Skills:</h3>
<div class="skills">
<div class="skills-detail">HTML</div>
<div class="skills-detail">CSS</div>
<div class="skills-detail">Java Script</div>
<div class="skills-detail">Python</div>
<div class="skills-detail">React</div>
<div class="skills-detail">Mobile Optimization</div>
<div class="skills-detail">SQL</div>
<div class="skills-detail">Mongo DB</div>
<div class="skills-detail">SEO</div>
</div>
</div>
</div>
</section>
<section class="projects">
<div class="projects-heading heading">
<h2>Projects</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor...</p>
</div>
<div class="projects-details">
<img src="./Images/website-ga21f3f03d_1280.jpg" alt="project case study">
<div class="projects-details-right">
<h3>Project Title</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tell sit amet adipiscing sem neque sed ipsum...</p>
<a href="#" class="projects-btn">Case Study</a>
</div>
</div>
<!-- Repeat the above projects-details block for each project -->
</section>
<section>
<div class="contact-me">
<div class="contact-heading heading">
<h2>Contact</h2>
<hr>
<p>Feel free to contact me by submitting the form below and I will get back to you as soon as possible!😄</p>
</div>
<div class="contact-form-container">
<form id="contact-form" method="post" action="submit-form.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
</form>
</div>
<div class="contact-btn-container">
<a href="#" class="contact-btn">Submit</a>
</div>
</div>
</section>
</main>
</body>
</html>
CSS
/* General */
/* ... (您的通用样式) */
/* Top Header Bar */
/* ... (您的顶部导航栏样式) */
/* Home Content */
/* ... (您的主页内容样式) */
/* About Me */
/* ... (关于我部分的样式) */
/* Section - PROJECTS */
/* ... (项目部分的样式) */
/* Section - CONTACT ME */
/* ... (联系我部分的样式) */
希望这可以帮助解决您的背景颜色一致性问题。如果您需要进一步的帮助，请随时告诉我。
英文:
Background Color Consistency Problem:
I know my code has some layout issues for sure. But just to explain what's the current problem I am struggling with, the background colors (background color pattern with 2 different colors) aren't filled entirely to the very edge sides of both (left and right edges), but colors are filled only on the center space.
Ref: Please check this image:
[1]: <https://prnt.sc/zf8bIJGu-iDK>
[2]: <https://prnt.sc/td47mQeiibvR>
I tried a lot of stuff like width:100%; in each parent section and removed margin: auto; and stuff... Nothing solved this problem yet...
My Current Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyungHwan Hong</title>
<link rel="stylesheet" href="./style.css">
<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=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="top-header-bar">
<a href="#" class="logo">Lorem<span>Ipsum</span></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div class="home">
<div class="home-left">
<p>Not only a web developer but also,</p>
<h1>A Problem Solver</h1>
<p class="line-3-spacing">For Your Business</p>
<a href="#" class="btn">Hit Me Up!</a>
</div>
<div class="home-right">
<img src="./Images/placeholder img banner.png" alt="MyungHwan Hong Web Developer, Full Stack Developer, Software Engineer">
</div>
</div>
</header>
<main>
<section class="about-me">
<div class="about-heading heading">
<h2>About Me</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="about-details">
<div class="about-details-left">
<h3>Get To Know Me!</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
</div>
<div class="about-details-right">
<h3>My Skills:</h3>
<div class="skills">
<div class="skills-detail">HTML</div>
<div class="skills-detail">CSS</div>
<div class="skills-detail">Java Script</div>
<div class="skills-detail">Python</div>
<div class="skills-detail">React</div>
<div class="skills-detail">Mobile Optimization</div>
<div class="skills-detail">SQL</div>
<div class="skills-detail">Mongo DB</div>
<div class="skills-detail">SEO</div>
</div>
</div>
</div>
</section>
<section class="projects">
<div class="projects-heading heading">
<h2>Projects</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="projects-details">
<img src="./Images/website-ga21f3f03d_1280.jpg" alt="project case study">
<div class="projects-details-right">
<h3>Project Title</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tell sit amet adipiscing sem neque sed ipsum.</p>
<a href="#" class="projects-btn">Case Study</a>
</div>
</div>
<div class="projects-details">
<img src="./Images/website-ga21f3f03d_1280.jpg" alt="project case study">
<div class="projects-details-right">
<h3>Project Title</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tell sit amet adipiscing sem neque sed ipsum.</p>
<a href="#" class="projects-btn">Case Study</a>
</div>
</div>
<div class="projects-details">
<img src="./Images/website-ga21f3f03d_1280.jpg" alt="project case study">
<div class="projects-details-right">
<h3>Project Title</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tell sit amet adipiscing sem neque sed ipsum.</p>
<a href="#" class="projects-btn">Case Study</a>
</div>
</div>
<div class="projects-details">
<img src="./Images/website-ga21f3f03d_1280.jpg" alt="project case study">
<div class="projects-details-right">
<h3>Project Title</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tell sit amet adipiscing sem neque sed ipsum.</p>
<a href="#" class="projects-btn">Case Study</a>
</div>
</div>
</section>
<section>
<div class="contact-me">
<div class="contact-heading heading">
<h2>Contact</h2>
<hr>
<p>Feel free to contact me by submitting the form below and I will get back to you as soon as possible!😄</p>
</div>
<div class="contact-form-container">
<form id="contact-form" method="post" action="submit-form.php">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Your Message" required></textarea>
</form>
</div>
<div class="contact-btn-container">
<a href="#" class="contact-btn">Submit</a>
</div>
</div>
</section>
</main>
</body>
</html>
CSS:
/* General */
* {
margin: 0 auto;
padding: 0 1em;
max-width: 70rem;
font-family: 'Poppins', sans-serif;
}
body {
overflow-x: hidden;
overflow-y: scroll;
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
color: #A2DBFA;
text-transform: uppercase;
}
h2 {
font-size: 2rem;
text-transform: uppercase;
text-align: center;
padding-top: 40px;
color: #053742;
text-decoration:overline;
text-decoration-thickness: 4px;
text-underline-offset: 12px;
}
h3 {
font-size: 1.2rem;
}
p {
margin-top: 2%;
color: black;
text-align: center;
}
section {
width: 100%;
padding: 0;
margin: 0;
}
.heading {
height: 12rem;
padding: 0;
margin: 0;
/* border: 2px solid red; */
}
/* Top Header Bar */
.top-header-bar {
display: flex;
padding: 0;
margin: 0;
align-items: center;
justify-content: space-between;
/* border: 2px solid red; */
min-height: 4.5rem;
background-color: #053742;
}
.logo {
text-decoration: none;
font-size: 25px;
color: #E8F0F2;
padding-right: ;
flex: 1;
}
span {
color: #FF7F50;
padding: 0 10px;
}
.top-header-bar ul li {
display: inline-block;
list-style-type: none;
text-decoration: none;
margin: -15px;
}
.top-header-bar ul li a {
text-decoration: none;
color: #E8F0F2;
font-weight: bold;
}
.top-header-bar ul li a:hover {
color: #A2DBFA;
transition: 0.4s;
}
/* Home Content */
.home {
/* border: 2px solid red; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 38rem;
background-color: #053742;
}
/* Home Content: Left Section */
.home .home-left {
flex: 1;
min-height: 10rem;
/* border: 2px solid red; */
padding: 30px;
margin-top: 10px;
margin-left: 13px;
}
.home .home-left h1 {
font-size: 4rem;
margin: -10px -50px;
text-align: center;
line-height: 70px;
padding-top: 1.2rem;
padding-bottom: .2rem;
}
.home .home-left p {
font-size: 1.2em;
color: #E8F0F2;
}
.line-3-spacing {
margin-bottom: 30px;
}
.home .home-left .btn {
text-decoration: none;
color: #E8F0F2;
background-color: #FF7F50;
font-weight: bold;
border-radius: 50px;
padding: 7px 30px;
font-size: 1.2em;
margin-left: 32%;
display: inline-flex;
justify-content: center;
}
.home .home-left .btn:hover {
background-color: transparent;
border: 2px solid #FF7F50;
transition: 0.4s;
font-weight:lighter;
}
/* Home Content: Right Section */
.home-right {
flex: 1;
}
.home-right img {
height: 24rem;
/* border: 2px solid red; */
padding: 0;
margin-left: 80px;
border-radius: 5%;
padding-top: 60px;
}
/* About Me */
.about-me {
background-color: #A2DBFA;
/* border: 2px solid red; */
padding: 0;
margin: 0;
}
.about-heading {
/* border: 2px solid red; */
margin-bottom: -1rem;
}
.about-me .about-details {
display: flex;
justify-content: center;
/* border: 2px solid red; */
padding-bottom: 2rem;
}
.about-heading h2 {
text-decoration-color: #053742;
}
.about-details-left {
flex: 1;
/* border: 2px solid red; */
}
.about-details-right {
flex: 1;
/* border: 2px solid red; */
}
.about-details-left h3 {
color: #053742;
text-align: center;
margin: 20px 20px;
}
.about-details-left p {
text-align: left;
}
.about-details-right h3 {
color: #053742;
text-align: center;
margin: 20px 20px;
margin-bottom: 5%;
}
.about-details-right .skills {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.about-details-right .skills .skills-detail {
background-color: #FF7F50;
font-size: 1.1rem;
font-weight: bold;
border-radius: 20px;
color: #053742;
padding: .8rem 1rem;
margin-left: .5rem;
margin-bottom: .6rem;
margin-right: .3rem;
}
/* Section - PROJECTS */
.projects {
/* border: 2px solid red; */
padding: 0;
margin: 0;
background-color: #053742;
}
.projects .projects-heading h2 {
text-align: center;
color: #E8F0F2;
text-decoration-color: #A2DBFA;
}
.projects .projects-heading p {
width: 80%;
color: whitesmoke;
text-align: center;
}
.projects-details {
border: 1px solid #E8F0F2;
display: flex;
margin-bottom: 2.5rem;
}
.projects-details img {
flex: 1;
height: 15rem;
width: 100%;
object-fit: cover;
}
.projects-details-right {
/* border: 2px solid red; */
flex: 1;
display: flex;
flex-direction: column;
}
.projects-details-right h3 {
color: #A2DBFA;
text-align: center;
margin: 20px 20px;
}
.projects-details-right p {
margin-bottom: 24px;
color: #E8F0F2;
}
.projects-details-right .projects-btn {
text-decoration: none;
color: #E8F0F2;
background-color: #FF7F50;
border-radius: 50px;
padding: 8px 30px;
font-size: 1em;
font-weight: bold;
}
.projects-details-right .projects-btn:hover {
background-color: transparent;
border: 2px solid #FF7F50;
transition: 0.4s;
font-weight: lighter;
}
/* Section - CONTACT ME */
.contact-me {
border: 2px solid red;
height: 45.1rem;
background-color: #A2DBFA;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contact-heading {
height: 12rem;
padding: 0;
margin: 0;
width: 100%;
margin-top: -60px;
/* border: 2px solid red; */
}
.contact-heading h2 {
text-decoration-color: #053742;
}
.contact-heading p {
text-align: center;
/* border: 2px solid red; */
width: 84%;
color: black;
}
.contact-form-container {
max-width: 650px;
padding: 0;
margin: 0;
/* border: 2px solid red; */
display: inline-flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
margin-bottom: -1.2rem;
}
.contact-form-container form {
max-height: 29rem;
color: #E8F0F2;
border: 2px solid #E8F0F2;
background-color: #053742;
margin-top: -0.5rem;
border-radius: 20px;
height: 100vh;
padding-top: 2rem;
padding-right: 1.5rem;
}
.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea {
width: 100%;
padding: 5px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 7px;
}
.contact-form-container textarea {
height: 150px;
}
.contact-form-container label {
font-weight: bold;
}
.contact-btn-container {
position: relative;
display: inline-flex;
justify-content:center;
}
.contact-me .contact-btn {
background-color: #FF7F50;
padding: 7px 30px;
border-radius: 50px;
text-decoration: none;
color: #E8F0F2;
font-weight: bold;
margin-bottom: px;
position: absolute;
bottom: 14px;
}
.contact-me .contact-btn:hover {
background-color: transparent;
border: 2px solid #FF7F50;
color: #E8F0F2;
}
I tried quite a number of variations to sort this issue out, for example, applying width: 100%; on each section for background colors, and removing margin: auto; and so on. Nothing solved this issue by far...
Would you anyone please save my life from being extremely stressed out of this frustration...?
答案1
得分: 1
看起来你需要从你的规则中移除填充和最大宽度。
* {
margin: 0 auto;
/* padding: 0 1em; */
/* max-width: 70rem; */
font-family: 'Poppins', sans-serif;
}
英文:
It looks like you need to remove padding and max-width from your rule
* {
margin: 0 auto;
/* padding: 0 1em; */
/* max-width: 70rem; */
font-family: 'Poppins', sans-serif;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论