divs appear above the footer instead of inside the footer

divs appear above the footer instead of inside the footer - html

I am just practicing CSS/HTML and am trying to make a google clone. Everything else seems fine but now I am trying to make a footer and whenever I put a div inside the footer, they appear on top of the footer instead of inside the footer.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: rgb(32, 33, 36);
color: white;
}
a {
text-decoration: none;
color: inherit;
}
.nav-bar a:nth-child(1):hover {
text-decoration: underline;
}
.nav-bar a:nth-child(2):hover {
text-decoration: underline;
}
.nav-bar {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-items {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-items li {
margin-left: 15px;
}
.menu-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 40px;
height: 40px;
padding: 10px;
border-radius: 50%;
}
.menu-icon:hover {
background-color: rgba(138, 133, 133, 0.26);
}
.menu-icon span {
background-color: #ffffff;
width: 20px;
height: 2px;
}
.profile-picture {
margin-right: 15px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.profile-picture:hover {
box-shadow: 0px 0px 0px 5px #7068683b;
}
.profile-picture img {
border-radius: 50%;
width: 100%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
margin-top: 80px;
}
.google-logo {
width: 375px;
height: 150px;
}
.google-logo img {
width: 100%;
}
.search-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
width: 580px;
border: solid;
border-color: #949090;
border-width: 1px;
border-radius: 300px;
padding: 9px;
height: 45px;
}
.search-container:hover {
box-shadow: 0px 0px 10px 2px #00000036;
}
.search-icon {
width: 25px;
height: 25px;
margin-right: 5px;
}
.search-icon img {
width: 100%;
}
.search-bar {
width: 550px;
height: 30px;
border: none;
outline: none;
}
.microphone {
width: 25px;
height: 25px;
}
.microphone img {
width: 100%;
}
.search-buttons {
margin-top: 25px;
}
.search-buttons button {
margin-left: 6px;
padding: 10px 16px 10px 16px;
background-color: #303134;
border: none;
border-radius: 4px;
color: #e8eaed;
font-size: 14px;
cursor: pointer;
border: solid 1px transparent;
}
.search-buttons button:hover {
border-color: #e8eaed;
}
.language-selector {
display: flex;
justify-content: center;
margin-top: 30px;
}
.language-selector p {
font-size: 13px;
color: #bdc1c6;
}
.language-selector a {
color: #8ab4f8;
}
.footer {
background-color: #446adb;
height: 100px;
margin-top: 92px;
}
<body>
<!-- start of the navigation bar-->
<nav class="nav-bar">
<ul class="nav-items">
<li>Gmail</li>
<li>სურათები</li>
<li>
<a href="#">
<div class="menu-icon">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</a>
</li>
<li>
<a href="#"><div class="profile-picture">
<img src="icons/unnamed.png">
</div></a>
</li>
</ul>
</nav>
<!-- end of the navigation bar -->
<!-- start of the main section (logo and search-bar)-->
<div class="main-section">
<a href="#"><div class="google-logo">
<img src="icons/google.png">
</div></a>
</div>
<div class="search-section">
<div class="search-container">
<div class="search-icon"><img src="icons/search.png"/></div>
<input type="text" class="search-bar">
<div class="microphone"><img src="icons/micro.png" alt=""></div>
</div>
<div class="search-buttons">
<button>
Google ძებნა
</button>
<button>
იღბალს მივენდობი
</button>
</div>
</div>
<div class="language-selector">
<p>Google ხელმისაწვდომია შემდეგ ენაზე: English</p>
</div>
<!-- end of the main section -->
<!-- start of the footer-->
<footer class="footer">
<div class="current-location">
this text should be inside the footer
</div>
</footer>
</body>
here is the picture of the problem I am having.
https://i.stack.imgur.com/AXMv6.png

It is inside the footer. Just this property:
background-color: rgb(32, 33, 36);
which you set for * gets inherited, and the bg color makes you think text it outside the footer. Comment it out for a while and you will see.

Related

How to get rid of the white right margin?

How can I make the containers fit in the page with no left white spaces?
I've tried html, body { margin: 0; padding: 0} besides adding all the content in a principal container than .container {max-width: 100%} but the margin is still there.
html,
body {
margin: 0;
padding: 0;
}
/* blue container, first container */
.header,
.about {
background-color: #1f2937;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 100px;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
padding-left: 150px;
flex: 1 0 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 0;
gap: 16px;
padding-right: 150px;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: space-between;
padding-bottom: 100px;
}
.about-text {
padding-left: 150px;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 350px;
margin-bottom: 5px;
}
.button-one {
background-color: #3882f6;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #1c5dc5;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.secondary-text {
width: 350px;
margin-bottom: 10px;
font-size: 18px;
color: #e5e7eb;
}
.header-image {
width: 400px;
height: 285px;
display: flex;
flex-shrink: 0;
padding-right: 150px;
padding-bottom: 25px;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
padding-top: 50px;
display: flex;
justify-content: center;
}
.image img {
width: 150px;
height: 155px;
border: 2px solid #3882f6;
border-radius: 15px;
}
.image img:hover {
width: 150px;
height: 155px;
border: 2px solid rgb(56, 130, 246);
border-radius: 15px;
box-shadow: 2px 2px 2px 1px rgba(56, 129, 246, 0.175);
}
.subtext {
color: #1f2937;
width: 150px;
text-align: center;
padding-top: 5px;
padding-bottom: 100px;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
padding-top: 50px;
gap: 40px;
}
/* third container, quote container */
.quote {
background-color: #e5e7eb;
height: 500px;
}
.quote-text {
font-size: 36px;
color: #1f2937;
font-style: italic;
font-weight: lighter;
width: 755px;
padding: 150px 320px;
padding-bottom: 5px;
}
.author {
font-size: 24px;
color: #1f2937;
font-weight: bolder;
padding-top: 5px;
padding-left: 895px;
width: 250px;
display: flex;
flex-shrink: 0;
}
/* fourth container, box action */
.action {
background-color: #F9FAF8;
height: 440px;
display: flex;
justify-content: center;
align-items: center;
}
.box-action {
background-color: #3882f6;
height: 130px;
width: 760px;
border-radius: 10px;
box-shadow: 0 5px 8px 0px rgba(8, 8, 8, 0.145);
display: flex;
justify-content: space-around;
align-items: center;
flex-shrink: 0;
}
.action-title {
font-size: large;
color: #F9FAF8;
font-weight: bolder;
}
.action-subtext {
color: #e5e7eb;
font-weight: lighter;
}
.button-two {
background-color: #3882f6;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
border: 2px solid #F9FAF8;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-two:hover {
color: #3882f6;
font-weight: bold;
background-color: #F9FAF8;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text-two {
color: #F9FAF8;
}
.button-text-two:hover {
color: #3882f6;
}
/* Footer */
.footer {
background-color: #1f2937;
color: #e5e7eb;
font-weight: lighter;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="header">
<div class="logo">your surfboard decals</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#">about</a></li>
<li><a class="link-text" href="#">contact</a></li>
</div>
</div>
<div class="about">
<div class="about-text">
<div class="main-text">Design your own decals</div>
<div class="secondary-text">Your art can be integrated into the build of your composite products, like surfboards, boats, SUPs, wake surf, paddle blades, skateboards, and even rockets headed for outer space! Literally, the sky is the limit for your creative and decorative potential.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/surfboards.jpg">
</div>
<div class="information">
<div class="information-header-text">Some of our customers arts</div>
<div class="image-subtext">
<div class="one">
<a href="https://storage.covet.pics/posts/5647583/standard_resolution/ff93db0981b0895fe2c4ac4120125f709d6908eb.jpg">
<div class="image"><img src="./images/design-one.jpg" alt="A man holding his board on his head"></div>
</a>
<div class="subtext">A man holding his board on his head</div>
</div>
<div class="two">
<a href="https://storage.covet.pics/posts/15039645/standard_resolution/e13ff9cc00e8119f16a324727ceb9b86">
<div class="image"><img src="./images/design-two.jpeg" alt="A white furry fluffy dog"></div>
</a>
<div class="subtext">A white furry fluffy dog</div>
</div>
<div class="three">
<a href="https://storage.covet.pics/postassets/7301301/standard_resolution/6913516f4a17a437faa32e83cd569e46">
<div class="image"><img src="./images/design-three.jpeg" alt="A logo with multiple colors"></div>
</a>
<div class="subtext">A logo with multiple colors</div>
</div>
<div class="four">
<a href="https://storage.covet.pics/posts/15087630/standard_resolution/9f218611200c504424b84a41b70c331b">
<div class="image"><img src="./images/design-four.jpeg" alt="Multiple surfboard stickers"> </div>
</a>
<div class="subtext">Multiple surfboard stickers</div>
</div>
</div>
<div class="quote">
<div class="quote-text">
You never really know what's coming. A small wave, or maybe a big one. All you can really do is hope that when it comes, you can surf over it, instead of drown in its monstrosity.
</div>
<div class="author">
- Alysha Speer
</div>
</div>
</div>
<div class="action">
<div class="box-action">
<div class="action-text">
<div class="action-title">Design your own art!</div>
<div class="action-subtext">Sign up for creating your art by clicking that button right over there!
</div>
</div>
<div class="button-two">
<a class="button-text-two" href="#">Sign up</a>
</div>
</div>
</div>
<div class="footer">
Copyright © The Odin Project 2023
</div>
enter image description

<a> tags not working and responding to hover effects

I am trying to make a web page that has a top navigation panel and a image slider at the bottom. The image slider works fine. but the navigation panel doesnt respond to clicks or hover effects.
body {
margin: 0px;
padding: 10px;
background-color: #ccc9c9;
}
header{
width: 100%;
height: 70px;
background-color: #282828;
}
h1{
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Calibri;
color: #39ca74;
}
span{
color: #ffffff
}
nav-btn a:hover{
text-decoration:underline;
}
li{
display: inline-block;
padding: 15px 30px;
}
a {
width: auto;
float: right;
margin-top: 8px;
text-decoration:underline;
text-align: center;
color:#ffffff
}
.box {
width: 300px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img {
height: 350px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font-family: calibri;
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span {
color: rgba(26, 26, 26, 0.5);
}
.quantity {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgb(190, 204, 191, 0.6);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.details-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
color: #ffffff;
background-color: #288a40;
transition: all ease 0.3s;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider {
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform: translate(50%);
}
<header>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Items</li>
<li>Browse</li>
<li>Add Items</li>
<li>Logout</li>
<li><input type="submit" value="Go to Google" />Logout</button></li>
</ul>
</nav>
</header>
<body>
<section class="slider">
<ul id="autoWidth" class="cs-hidden">
<li class="item-a">
<div class="box">
<div class="slide-img">
<img src="static/images/1.webp" alt="1" />
<div class="overlay">
View Details
</div>
</div>
<div class="detail-box">
<div class="type">
Camera & Camcorders
<span>Available Units: </span>
</div>
0
</div>
</div>
</li>
</ul>
</body>
Result:
Above code is the partial code for the html code I am using and the css is code is the complete one. As you can see, the hovering would effect it at all and they dont respond to clicks either

Maybe you can try this code, make sure you run in full screen
body {
margin: 0px;
padding: 10px;
background-color: #ccc9c9;
}
header{
width: 100%;
height: 70px;
background-color: #282828;
}
h1{
position: absolute;
padding: 3px;
float: left;
margin-left: 2%;
margin-top: 10px;
font-family: Calibri;
color: #39ca74;
}
span{
color: #ffffff
}
.nav-btn {
text-decoration: none;
}
.nav-btn:hover{
text-decoration:underline;
}
li{
display: inline-block;
padding: 15px 30px;
}
a {
width: auto;
float: right;
margin-top: 8px;
text-decoration:underline;
text-align: center;
color:#ffffff
}
.box {
width: 300px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img {
height: 350px;
position: relative;
}
.slide-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.detail-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font-family: calibri;
}
.type {
display: flex;
flex-direction: column;
}
.type a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span {
color: rgba(26, 26, 26, 0.5);
}
.quantity {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgb(190, 204, 191, 0.6);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.details-btn {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.details-btn:hover {
color: #ffffff;
background-color: #288a40;
transition: all ease 0.3s;
}
.slide-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.slider {
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transform: translate(50%);
}
<header>
<nav>
<ul class="navigation">
<li><a class="nav-btn" href="#">Home</a></li>
<li><a class="nav-btn" href="#">Items</a></li>
<li><a class="nav-btn" href="#">Browse</a></li>
<li><a class="nav-btn" href="#">Add Items</a></li>
<li><a class="nav-btn" href="#">Logout</a></li>
</ul>
</nav>
</header>
<body>
<section class="slider">
<ul id="autoWidth" class="cs-hidden">
<li class="item-a">
<div class="box">
<div class="slide-img">
<img src="static/images/1.webp" alt="1" />
<div class="overlay">
View Details
</div>
</div>
<div class="detail-box">
<div class="type">
Camera & Camcorders
<span>Available Units: </span>
</div>
0
</div>
</div>
</li>
</ul>
</body>

nav-btn a:hover{
text-decoration:underline;
}
looks like you've left out the . on the nav-btn class.
it should be
.nav-btn a:hover{
text-decoration:underline;
}

What in my CSS is making my header/nav bar display incorrectly?

Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}

Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!

As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Problem displaying <ul> element inside div

I'm creating footer for my website. I encounter problems that seem to be banal, maybe not. Inside the 'footer' element is a list of 'ul', inside them 'li' with links to social media. The Chrome browser does not display these elements, similarly to Opera and Mozilla. Where is the problem? I am running out of ideas.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', 'Josefin Sans', sans-serif;
font-size: 0;
}
.navbar {
font-size: 18px;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
vertical-align: middle;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
.background-image img {
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 250px;
}
.column-left {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-center {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-right {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.container .column-left {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
h2 {
font-size: 23px;
padding: 15px;
}
p {
font-size: 20px;
padding: 15px;
}
.container .column-center {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
.container .column-right {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
#media screen and (min-width: 600px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
#media screen and (max-width: 599px) {
h2.title {
font-size: 15px;
}
p {
font-size: 13px;
}
}
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8a84b6b9df.js"></script>
<div>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<img src="img/developer.png" alt="Sebastian Falba" width="50">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
About me
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="background-image">
<img src="img/responsive.jpg" alt="web development">
</div>
<div class="container">
<div class="column-left"><i class="fas fa-keyboard fa-3x"></i>
<h2 class="title">Modern design</h2>
<p class="description">Fantastic Clean Website Designs</p>
</div>
<div class="column-center"><i class="far fa-window-maximize fa-3x"></i>
<h2 class="title">Responsive</h2>
<p class="description">Make your website mobile-friendly</p>
</div>
<div class="column-right"><i class="fas fa-laptop-code fa-3x"></i>
<h2 class="title">Quality code</h2>
<p class="description">Coding best practices are a set of my rules</p>
</div>
</div>
<footer>
<ul>
<li>Footer</li>
</ul>
</footer>

You set the font-size to 0 so the text has no height.
Since the text has no height, the <a> has no height, so the <li> has no height, so the <ul> has no height, to the <footer> has no height, so you can't see it.

Site doesn't fit the viewport

I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.

Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>

I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

divs appear above the footer instead of inside the footer - html

It is inside the footer. Just this property: background-color: rgb(32, 33, 36); which you set for * gets inherited, and the bg color makes you think text it outside the footer. Comment it out for a while and you will see.

Related

How to get rid of the white right margin?

<a> tags not working and responding to hover effects

What in my CSS is making my header/nav bar display incorrectly?

Problem displaying <ul> element inside div

Site doesn't fit the viewport

Categories

Resources