我不知道为什么输入会克服div的边缘。
我尝试了这个解决方案(在输入部分输入CSS代码box-sizing: border-box;(，但没有成功：为什么我的输入没有'；是否适合div？
然后我在w3schools进行了研究，但他们提出了相同的解决方案：https://www.w3schools.com/howto/howto_css_responsive_form.asp
我的代码：
html,
body {
font-size: 15px;
background: #000000;
color: #b9b9b9;
margin: 0;
}
img {
max-width: 100%;
display: block;
}
input {
font-size: 0.9rem;
background: transparent !important;
color: #535353;
border: 0.1em solid !important;
padding: 0.2rem;
margin: 0 auto;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
/********** TYPOGRAPHY START **********/
/* General */
h1,
h2 {
margin: 0;
color: #ffffff;
}
/* For classes */
.subtitle {
font-size: 0.75rem;
margin: 0;
}
.article-type {
font-size: 0.85rem;
}
.article-cotinueReading {
text-decoration: none;
font-weight: 700;
color: #287cd4;
border: 0.1em solid #287cd4;
padding: 0.1em;
}
.article-cotinueReading:hover {
background: #30394a;
}
/********** TYPOGRAPHY END **********/
/********** LAYOUT START **********/
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
border: 1px solid red;
}
.container-flex {
display: flex;
justify-content: space-between;
}
/* Navegation */
.nav-list {
list-style: none;
padding: 0;
justify-content: center;
}
.nav-li {
margin: 0.75em 0em;
}
.nav-link {
text-decoration: none;
color: #b9b9b9;
font-weight: 700;
padding: 0.2em 0;
}
.nav-link:hover {
color: #287cd4;
border-bottom: 0.15em solid;
}
/********** LAYOUT END **********/<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<title>Proyecto Página Web</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container container-flex">
<aside id="aside" role="complementary">
<div class="site-title">
<h1>My Web</h1>
<p class="subtitle">Web about proyects</p>
</div>
<div class="container container-nav">
<nav>
<ul class="nav-list">
<li class="nav-li"><a class="nav-link" href="#">Inicio</a></li>
<li class="nav-li"><a class="nav-link" href="#">Sobre mí</a></li>
<li class="nav-li"><a class="nav-link" href="#">Proyectos libres que uso</a></li>
</ul>
</nav>
</div> <!-- / .container container-nav -->
<div class="container container-footer">
<div class="mb-4">
<h3>Suscribete al newsletter</h3>
<form action="#" class="form-subscribe">
<div class="form-input">
<input type="text" id="form-newsletter" placeholder="Introduce tu e-mail">
</div>
</form>
</div>
</div> <!-- / .container container-footer -->
</aside>
<main role="main">
<article class="article-recent">
<div class="article-recent-main">
<p class="article-type">Last Proyect</p>
<h2 class="article-title">Make a Drone</h2>
<p class="article-body">Text of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the articleText of the article
</p>
<a href="#" class="article-cotinueReading">Seguir leyendo</a>
</div>
<div class="article-recent-secondary">
<img src="" alt="" class="article-image">
</div>
</article>
</main>
</div> <!-- / .container container-flex-->
</body>
</html>如果有人解决了同样的问题或知道该由谁来解决，我将不胜感激。
感谢您的帮助。
您可以简单地将width: 100%应用于输入元素。每个html元素都有浏览器设置的默认样式，这使得它们以某种方式占用空间。这就是为什么它会离开容器。
使用CSS flex的基本示例：
/*QuickReset*/ * {box-sizing: border-box; margin: 0; font:16px/1.4 sans-serif;}
.Form {}
.Form-label { display: flex; }
.Form-labelDesc { min-width: 200px; }
.Form-field { flex: 1; } /* Business as usual */<form class="Form" action="">
<label class="Form-label">
<span class="Form-labelDesc">👤︎ Name</span>
<input class="Form-field" type="text" name="name" autocomplete="off" />
</label>
<label class="Form-label">
<span class="Form-labelDesc">📧︎ Email</span>
<input class="Form-field" type="text" name="email" autocomplete="off" />
</label>
<label class="Form-label">
<span class="Form-labelDesc">🖉︎ Bio</span>
<textarea class="Form-field" name="bio" autocomplete="off"></textarea>
</label>
<button type="submit">Register</button>
</form>