user10793022
Reputation:
CSS element not aligning properly
I am trying to align my logo at the very left of the screen. I want to keep all of my other elements at the location on the screen. Every time I try to edit the margin or padding of my logo, all of my elements pile up. I know this seems like a pretty easy question, but I just can't figure this out. My code is down bellow.
*{
padding: 0px;
margin: 0px;
font-family: poppins, sans-serif;
font-weight: 700;
box-sizing: border-box;
}
#header{
padding-left: 20%;
width: 100%;
background: #FFF;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
#header #logo{
font-style: italic;
font-size: 20px;
}
#header #logo span{
color: #1566e0;
}
#header nav{
color: #1566e0;
}
#header nav a{
font-size: 14px;
text-decoration: none;
padding: 10px;
text-align: center;
color: black;
}
#header nav a:hover{
opacity: 0.9;
}
#header nav a:last-child{
color: white;
background: #1566e0;
padding: 10px 20px;
margin-left: 30px;
border-radius: 30px;
}
#container{
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 20px;
height: 575px;
}
#bg-container{
width: 50%;
}
#bg-container svg{
width: 100%;
height: 90%;
}
#content-container{
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
}
#content-container h1 {
color: #1566e0 !important;
font-weight: 900;
font-size: 80px;
line-height: 0.9em;
margin-bottom: 30px;
}
#content-container p{
line-height: 1.8em;
font-weight: 500;
}
#content-container button{
border: none;
outline: none;
color: #FFF;
background-color: #1566e0;
padding: 16px 0px;
border-radius: 40px;
font-size: 16px;
width: 160px;
margin-top: 30px;
cursor: pointer;
}
#content-container button:hover{
opacity: 0.9;
}<!DOCTYPE html>
<html>
<head>
<title>GoodDeed - Home</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
</style>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo">
<h3><span>Good</span>Deed</h3>
</div>
<nav>
<a href="#">ABOUT</a>
<a href="#">INFO</a>
<a href="#">DASHBOARD</a>
<a href="#">GET STARTED</a>
</nav>
</div>
<div id="container">
<div id="content-container">
<h1>Welcome!</h1>
<p>Eradicating malnorisment and poverty by connecting people in need and donors.
To learn how you can help make a difference,
click here!</p>
<button>Read More</button>
</div>
<div id="bg-container">
</div>
</div>
</body>
</html>Upvotes: 0
Views: 90
Answers (1)
Deepu Reghunath
Reputation: 9673
Just remove the padding-left:20% of header element and the following style to to #header
#header{
width: 100%;
background: #FFF;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between; /* changes here */
align-items: center;
}
*{
padding: 0px;
margin: 0px;
font-family: poppins, sans-serif;
font-weight: 700;
box-sizing: border-box;
}
#header{
width: 100%;
background: #FFF;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between; /* changes here */
align-items: center;
}
#header #logo{
font-style: italic;
font-size: 20px;
}
#header #logo span{
color: #1566e0;
}
#header nav{
color: #1566e0;
}
#header nav a{
font-size: 14px;
text-decoration: none;
padding: 10px;
text-align: center;
color: black;
}
#header nav a:hover{
opacity: 0.9;
}
#header nav a:last-child{
color: white;
background: #1566e0;
padding: 10px 20px;
margin-left: 30px;
border-radius: 30px;
}
#container{
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 20px;
height: 575px;
}
#bg-container{
width: 50%;
}
#bg-container svg{
width: 100%;
height: 90%;
}
#content-container{
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
}
#content-container h1 {
color: #1566e0 !important;
font-weight: 900;
font-size: 80px;
line-height: 0.9em;
margin-bottom: 30px;
}
#content-container p{
line-height: 1.8em;
font-weight: 500;
}
#content-container button{
border: none;
outline: none;
color: #FFF;
background-color: #1566e0;
padding: 16px 0px;
border-radius: 40px;
font-size: 16px;
width: 160px;
margin-top: 30px;
cursor: pointer;
}
#content-container button:hover{
opacity: 0.9;
}<!DOCTYPE html>
<html>
<head>
<title>GoodDeed - Home</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
</style>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="logo">
<h3><span>Good</span>Deed</h3>
</div>
<nav>
<a href="#">ABOUT</a>
<a href="#">INFO</a>
<a href="#">DASHBOARD</a>
<a href="#">GET STARTED</a>
</nav>
</div>
<div id="container">
<div id="content-container">
<h1>Welcome!</h1>
<p>Eradicating malnorisment and poverty by connecting people in need and donors.
To learn how you can help make a difference,
click here!</p>
<button>Read More</button>
</div>
<div id="bg-container">
</div>
</div>
</body>
</html>Upvotes: 1