How to position the website box on the right
P粉953231781
2023-08-14 19:16:04
<p>I'm having a problem here, I'm trying to put a box on the right side of the website but don't know why it's not working, I'm trying to use <code>justify-content: flex-end;< /code>Align the box to the "end" of the page, then add <code>padding-right</code> to <code>200px</code>, but alas this doesn't work. Any help with explanation would be greatly appreciated.</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 50vh;
background-color: #1f2937;
position: static;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 10vh;
background-color: #1f2937;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
font-size: 24px;
font-family: 'Times New Roman', Times, serif;
color: white;
justify-content: space-between;
padding-top: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding-left: 200px;
position: absolute;
top: 0;
}
.navbar {
color:white;
font-size: 18px;
position: fixed;
width: 85%;
top: 0;
right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
padding-top: 15px;
padding-right: 200px;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
text-decoration: none;
}
.text1 {
position: relative;
color: white;
padding-left: 200px;
font-size: 48px;
font-weight: bold;
width: 720px;
}
.text2{
color: white;
font-size: 18px;
padding-left: 200px;
width: 520px;
}
.text3{
text-align: center;
display:flex;
align-items:center; /*vertical center*/
justify-content:right; /*horizontal center*/
width: 500px;
height:350px;
background-color: grey;
}
</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="logo">
<h2>Header Logo</h2>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">header link one</a></li>
<li><a href="index.html">header link two</a></li>
<li><a href="index.html">header link three</a></li>
</ul>
</div>
<div class="text1">
<h2>This website is awesome</h2>
</div>
<div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
<div class="text3">this is a placeholder for an image</div>
</div>
<div class="footer">
Copyright © The Odin Project 2023
</div>
</body>
</html></pre>
<p><br /></p>
<p>I tried using justify-content:flex-end to align it but I'm at my wits end, to be honest an explanation of my problem would be very helpful, I only included the necessary CSS code and the whole HTML file . Thanks in advance for all your help! </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First, you use the flex property, although you haven't set display:flex;
Secondly, to make a div move to the right (such as a box): (indent as needed)
.container{ display:flex; align-items:center; /*垂直居中*/ justify-content:right; /*水平居中*/ }``` #text{ display:block; }