How to have even spacing along vertical axis - html

I have a card that has a div inside it that contains 3 elements (2 headers and a paragraph). I want there to be even spacing between each of the elements and the top and bottom of the card. There is a big margin after the last element (bottom of the card). How can I achieve even vertical spacing?
Here is my code
.homeResourcesContainer{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
margin: 100px;
width: 500px;
height: 450px;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
color: white;
font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>

Use:
align-items: stretch;
Hat tip to this post for the tip: How to get flexbox columns to be the same height?
.homeResourcesContainer{
display: flex;
align-items: stretch;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
display: flex;
flex-direction: column;
padding: 1em;
margin: 1em;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
height: 100%;
align-items: center;
justify-content: space-evenly;
color: white;
font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>

I think this is what you trying to achieve.
.homeResourcesContainer{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
margin: 100px;
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
width: 200px;
color: black;
font-family: "Source Sans Pro", sans-serif;
}
<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>

.homeResourcesContainer{
display: flex;
/*align-items: center;
justify-content: center;*/
margin-bottom: 20px;
}
.homeResource{
padding: 30px;
/*margin: 100px; */
margin: 50px;
width: 500px;
/*height: 450px;*/
border-radius: 18px;
background: #800400;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.homeResourceContent{
/*display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;*/
color: white;
font-family: "Source Sans Pro", sans-serif;
}
.homeResourceContent h2 {
margin: 0;
}
<div class="homeResourcesContainer">
<div class="homeResource">
<div class="homeResourceContent">
<h1 class="homeResourceHeader">Courses</h1>
<p class="homeResourceDescription">Nehemiah University offers a variety of different courses so you have the skills to get to where you want to be.
Whether it be learning how to operate a forklift, apply for a loan, or even learning about science and math,
Nehemiah University will give you the tools to take your personal and proffesional life to the next level.
Sign up for a class and find out what it's all about!</p>
<h2>Click this card to go to the Courses tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Training Material</h1>
<p>We want our Nehemiah Family Members to be as succesful as possible in their role. Through proper training and growth initiatives,
we strive to ensure each of our Family Members is achieving their full potential. Use these training materials to learn on the job
skills such as how to labeler machine, filling out time cards, requesting time off, and many more skills to help you on your Nehemiah Journey!</p>
<h2>Click this card to go to the Training Materials tab!</h2>
</div>
</div>
<div class="homeResource">
<div class="homeResourceContent">
<h1>Resources</h1>
<p>Need access to resources for personal development? Nehemiah's social service team offers a variety of different resources and connections
to help you with whatever personal or professional issues you may be experiencing. We want all of our Family Members to have access to professional resources
that help them grow as individuals. Click the Resources tab to check out our pillars of personal development and the resources we offer!
</p>
<h2>Click this card to go to the Resources tab!</h2>
</div>
</div>
</div>

Related

html/ css #media change padding and margin for a smaller screen

I tried change the padding between different objects so that the content is not on top of each other. I tried changing the padding inside #media, but I see no changes.
<div class="row6">
<div class="final__tooltip top" title="Personalized Approach"
des="Teaching and learning are personal. Students and instructors feel welcomed and recognized when their needs are met in the classroom. Enabling flexible course delivery and offering a variety of technologies to accommodate different learning styles, shows instructors and students that classroom environments are tailored to their needs.">
<div class="design-col">
<img src="images/Home/Layer 2.svg">
<h3>Personalized Approach</h3>
</div>
</div>
<div class="final__tooltip top" title="Education is Accessible"
des="Designing with accessibility in mind ensures that everyone can access content in a way that meets their needs. Teaching and learning can be thought of as collaborative, consistent, and accessible no matter the department or role. Designing classroom environments that enable universal design for learning ensures that equity and access.">
<div class="design-col">
<img src="images/Home/Group-6.svg">
<h3>Education is Accessible</h3>
</div>
</div>
<div class="final__tooltip top" title="Instructor & Student Empowerment"
des="Support empowers students and instructors to adapt to new instructional environments. Empowered individuals feel comfortable and confident with venturing into new learning spaces.">
<div class="design-col">
<img src="images/Home/Group-7.svg">
<h3>Instructor & Student Empowerment</h3>
</div>
</div>
<div class="final__tooltip top" title="Recognize Emotional Stakes"
des="Individuals experience learning spaces along continuums of comfort that range from feelings of empowerment to those of discomfort. By recognizing that emotions are linked to class design and routines, solutions can be considered for a more accessible space.">
<div class="design-col">
<img src="images/Home/Group 57.svg">
<h3>Recognize Emotional States</h3>
</div>
</div>
<div class="final__tooltip top" title="Autonomy in Teaching and Learning"
des="Autonomy underscores the fact that instructors and students can meet their own needs when they have access to the right tools. Autonomy facilitates innovation and connection in learning spaces.">
<div class="design-col">
<img src="images/Home/Group-2.svg">
<h3>Autonomy in Teaching and Learning</h3>
</div>
</div>
</div>
.row6 {
display: flex;
justify-content: space-evenly;
margin-right: 40px;
margin-left: 40px;
margin-bottom: auto;
padding-bottom: 200px;
}
.design-col {
flex-basis: 40%;
margin: 5px;
background: transparent;
padding: 5px;
position: relative;
}
#media (max-width: 700px) {
.row6{
flex-direction: column;
}
}
[how it looks on the website right now][1]
[1]: https://i.stack.imgur.com/1V03S.png

How can I fix the header and make the body and footer scrollable when window height is reduced?

I'm making myself a portfolio website and am having trouble with the body scrolling underneath the header and footer when the window height is reduced.
I believe the problem is with multiple parts of my CSS, the header and footer as well as possibly either the whole body or specific parts of it like the background image itself. Before the body started scrolling underneath the footer I was having problems with the footer not going all the way to the bottom of the page and the background image sticking out from the bottom. Adjusting the footer p padding seemed to fix it but then this happened.
* {
margin: 0;
}
html,
body {
height: 100%;
}
html {
background: url(Photo-by-Artem-Podrez-from-Pexels.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
margin-block-start: 0em;
margin-block-end: 0em;
}
#header {
background-color: #A97938;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
#name {
color: #335067;
font-size: 2em;
padding-top: 10px;
padding-left: 10px;
}
#self {
display: block;
padding-top: 95px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#nav-bar {
height: 60px;
display: flex;
justify-content: space-between;
}
#name {
max-height: 60px;
}
div#links {
display: flex;
justify-content: flex-start;
}
div#links>a {
padding: 20px;
font-size: 20px;
}
#about-me-text {
display: block;
color: #D4A66A;
flex-wrap: wrap;
margin-left: 50px;
margin-right: 50px;
position: relative;
}
#footer {
background-color: #A97938;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.footer p {
padding-bottom: 0;
}
!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="homepage_redo_style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfr0j+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
</head>
<body id="home" class="vsc-initialized">
<!-- nav bar -->
<div id="header">
<div id="nav-bar" class="container">
<div id="name">My Name</div>
<div id="links">
Projects
Resume
<a href id="contact-link">Contact</a>
</div>
</div>
</div>
<div id="bg">
<div class="about-me-wrapper">
<img id="self" src="WIN_20210912_15_35_13_Pro.jpg" width="184" height="262">
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
</div>
</div>
<div id="footer">
<div class="container footer">
<div id="contact">
<p class="align-center">Contact Info:</p>
<p class="align-center">
Email:
my email address
<br> Phone:
my phone number
</p>
</div>
<div id="social">
<a href="linkedin profile link" target="_blank">
<img src="linkedin-social.png" alt>
</a>
</div>
<div>
<p class="align-center">© 2022 by My Name
<br> All rights reserved.
</p>
</div>
</div>
</div>
<div id="contact-modal" class="model" style="display:
block;">
<div class="model-content">
<h1>Contact Info:</h1>
<br>
<p>
Feel free to contact me!
<br> Email me at
<a href="mailto:my email address">my email
address</a>
<br> or call at:
<a href="tel:my phone number">my phone
number</a>
<br>
</p>
<img src="close_icon.jpg" alt class="model-close" id="close-contact-modal">
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>
Nest the content in a wrapper then use overflow-y: scroll; on that div.
I added a bunch more text so you can see the demonstration.
* {
margin: 0;
}
html,
body {
height: 100%;
overflow-y: hidden;
}
html {
background: url(Photo-by-Artem-Podrez-from-Pexels.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
margin-block-start: 0em;
margin-block-end: 0em;
}
#wrapper {
height: 100%;
overflow-y: scroll;
}
#header {
background-color: #A97938;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
#name {
color: #335067;
font-size: 2em;
padding-top: 10px;
padding-left: 10px;
}
#self {
display: block;
padding-top: 95px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#nav-bar {
height: 60px;
display: flex;
justify-content: space-between;
}
#name {
max-height: 60px;
}
div#links {
display: flex;
justify-content: flex-start;
}
div#links>a {
padding: 20px;
font-size: 20px;
}
#about-me-text {
display: block;
color: #D4A66A;
flex-wrap: wrap;
margin-left: 50px;
margin-right: 50px;
position: relative;
}
#footer {
background-color: #A97938;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.footer p {
padding-bottom: 0;
}
!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="homepage_redo_style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfr0j+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
</head>
<body id="home" class="vsc-initialized">
<!-- nav bar -->
<div id="header">
<div id="nav-bar" class="container">
<div id="name">Kyle Williams</div>
<div id="links">
Projects
Resume
<a href id="contact-link">Contact</a>
</div>
</div>
</div>
<div id="wrapper">
<div id="bg">
<div class="about-me-wrapper">
<img id="self" src="WIN_20210912_15_35_13_Pro.jpg" width="184" height="262">
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p><p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p><p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
<p id="about-me-text">As someone with a physical disability, my daily life involves a lot of problem solving. This directly translates into my web development career as my disability gives me a unique perspective on how to get code to do what I want and in designing
websites. I love learning new things and seeing the results of a job well done is very satisfying and fulfilling to me. I'm always looking for ways to gain experience and challenge myself, so if you have something I may be a good fit for feel
free to send me an email.</p>
</div>
</div>
</div>
<div id="footer">
<div class="container footer">
<div id="contact">
<p class="align-center">Contact Info:</p>
<p class="align-center">
Email:
kyle.williams521997#gmail.com
<br> Phone:
(216) 815-2705
</p>
</div>
<div id="social">
<a href="linkedin.com/in/kyle-williams-b5bb60162" target="_blank">
<img src="linkedin-social.png" alt>
</a>
</div>
<div>
<p class="align-center">© 2022 by Kyle Williams
<br> All rights reserved.
</p>
</div>
</div>
</div>
<div id="contact-modal" class="model" style="display: block;">
<div class="model-content">
<h1>Contact Info:</h1>
<br>
<p>
Feel free to contact me!
<br> Email me at
kyle.williams521997#gmail.com
<br> or call at:
(216) 815-2705
<br>
</p>
<img src="close_icon.jpg" alt class="model-close" id="close-contact-modal">
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>

If it's in a main div with margin, make a div with a width of 100vw

I'm trying to make a div with a width of 100vw to cover all viewing areas, however, it comes in a div with a margin, so I'm having trouble.
I've also included an image link below to help you understand.
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
/* About Section */
.about {
display: block;
background-color: #2e3038;
margin-left: -6rem;
margin-right: 6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
As you can see, I attempted to use margin-right, however, it would not work.
I can't use inspect element since the design I'm attempting to replicate is in png format.
You're close - you've just specified the wrong direction for margin-right:
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
.about {
background-color: #2e3038;
margin-left: -6rem;
margin-right: -6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
Full Width Containers in Limited Width Parents | CSS-Tricks

Trying to align image on the right of text using HTML & CSS

I am trying to align my image next to the text using HTML, so far I have tried adding float:right but it just seems to push the div down. I have also tried adding overflow:hidden but it does not seem to work.
I am using media queries to make this website responsive, and this is where I am having issues with moving the image to the right of the text,
I hope you can help.
<section id="section_about" class="grid">
<h2 class="content-title">
Our Story
</h2>
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
CSS:
.content-title {
font-family: 'Playball', sans-serif;
color: #C59D5F;
font-size: 2.5em;
padding: 5px 0;
margin-top: 10px;
}
.content-wrap p {
padding-left: 20px;
line-height: 30px;
}
.about_img{
padding: 0 10px;
}
#media(min-width: 1024px) {
.about_content {
width: 50%;
background: pink;
}
.about_img_container{
background: red;
margin: 150px;
float: right;
overflow: hidden;
}
}
A more modern way of doing this would be with flexbox:
HTML
<div class="flex-container">
<div class="content-wrap about_content">
<p>
Your Text here
</p>
</div>
<div class="about_img_container">
<p>sodfosdf</p>
</div>
</div>
CSS
.flex-container {
display: flex;
justify-content: space-around;
}
The justify-content property defines how the two elements are displayed next to each other or under each other.
First you will need to remove h2 from the section:
<h2 class="content-title">
Our Story
</h2>
<section id="section_about" class="grid">
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
Then give the section a display: flex.
#section_about {
display: flex;
flex-direction: row;
}
Just restrict the size of the image container by applying an appropriate width to it in your CSS rule, and move it above the DIV that contains the text so the text can float next to and under the image.
HTML
<div class="container">
<div class="content-wrap about_content">
<p>
Pls text here
</p>
</div>
<div class="about">
<p>Pls text here</p>
</div>
</div>
CSS
.container {
display: flex;
justify-content: space-around;
}

Sidebar not collapsing on smaller screens

I'd like my header to expand the same width as the entire div of the container so that it is one long block. I'm using Bootstrap 4 and the "cards" which replaced the old panels.
Unfortunately, my header isn't able to do that. I've tried manipulating the margins and padding in CSS, but that hasn't worked. You can see in the picture there is a sliver of white around the edges of the header. I want the white borders around the entire div of the container to keep it offset from other content, I just want the header element to cover it up.
For convenience, I've put a small border around the header element (h2) and the div which it sits inside.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
It looks like there's just a bit of padding around your .card-header class. Below I set the left and right padding of the class to 0. Here's a CodePen to show it working with Bootstrap 4 included.
Feel free to let me know if I missed the point completely.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {
padding-left: 0;
padding-right: 0;
}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
Edit: This padding is caused by the .card-header class included with card.scss