Im doing a course about web devolepment and im a complete newbie so please dont judge me. I have an assignment where i need to recreate a screenshot of a page. Im having problems at pushing the divs from the footer to the left and right and for them to have equal space between the div and the edge of the screen. This should be the result (https://phpout.com/wp-content/uploads/2023/08/sgjan.png), and this is what i’ve got:(https://phpout.com/wp-content/uploads/2023/08/a2LMr.png)
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Roboto, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
img {
width: 600px;
}
ul{
list-style-type: none;
}
button {
font-family: Roboto, sans-serif;
border: none;
padding: 8px 15px 8px 15px;
border-radius: 8px;
background: #eee;
}
input {
border: 1px solid #ddd;
border-radius: 16px;
padding: 8px 24px;
width: 400px;
margin-bottom: 16px;
background-color: gainsboro;
}
.header{
display: flex;
justify-content: space-between;
}
.left-links{
display: flex;
flex-direction: row;
gap: 10px;
}
.right-links{
display: flex;
flex-direction: row;
gap: 10px;
}
a{
text-decoration: none;
color: black;
}
.content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.footer{
display: flex;
background-color: gainsboro;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="header">
<ul class="left-links">
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
</ul>
<ul class="right-links">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
<div class="content">
<img src="./logo.png" alt="Project logo. Represents odin with the project name.">
<div class="input">
<input type="text">
</div>
<div class="buttons">
<button>Do the thing!</button>
<button>Do the other thing!</button>
</div>
</div>
<div class="footer">
<ul class="left-links">
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
</ul>
<ul class="right-links">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</body>
</html>Ive tried to do it either with justify-content:space-between and i was thinking about using the flex-start and flex-end attributes too but they dont work
2
Answers
You just need to remove the padding of ul elements inside footer and add some padding to the .footer try this:
<ul>s have default padding. Just reset it to10pxin both sides for the<ul>of.headerand.footerclasses.