0
Ich möchte meinen Text auf der rechten Seite der dunkleren Box setzen. Ich möchte die AAAAAAAAAAAAAA 'über der dunklen Box auf der rechten Seite sein. Ich habe es versucht, indem ich es in einen anderen Container geschrieben habe, aber es drückt die dunkle Box runter. Vielen Dank!Wie verschiebe ich den Text an die richtige Stelle?
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.gray-container {
background: #E5E5E5;
width: 60%;
margin: 0 auto;
min-height: 600px;
margin-top: 20px;
border-left: 10px
}
.dark-container {
background: #B9B9B9;
width: 20%;
margin: 0 auto;
min-height: 660px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-left: 30px;
}
.text {
text-align: justify margin: 20px 20px 30px 100px;
}
img {
width: 300px;
height: 90px;
padding: 30px 30px 30px 50px;
}
.gray-banner {
float: left;
width: 60%;
min-height: 20px;
padding: 10px 0 0 10px;
background-color: #E5E5E5;
position: relative;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0 120px 0 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #fff;
}
li {
float: left;
border-right: 1px solid #bbb;
border-color: #87CEFA;
width: 200px;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF51;
}
.container {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 0 14px 15px 15px;
}
h1 {
margin: 5px 5px 15px 44px;
font-family: calibri;
}
h2 {
margin: 50px 27px 0 45px;
font-family: calibri;
}
p {
margin: 50px 27px 0 45px;
font-family: calibri;
font-size: 20px
}<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
<ul>
<li><a href="a.html">a</a></li>
<li><a href="b.html">b</a></li>
<li><a href="c.html">c</a></li>
<li><a href="d.html">d</a></li>
<li><a href="e.html">e</a></li>
</ul>
<div class="gray-banner">
<h1>eeeeeeee</h1>
</div>
<div class="gray-container">
<div class="text">
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="dark-container">
<h2 style="font-size: 24px; margin: 10px 5px 5px 0; "><br>hey</h2>
</div>