hey guys i want to move the .mission-banner to the vertical centre of the .mission div. but margin: auto 0; wont work and also flex-box isnt. so what am i not seeing here ?
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</body>
</html>
this is what it looks like rn:
The issue is you have fixed height/width for the mission and relative positioning. You'll also need a fixed height set for the mission-banner to position it in the center of the page.
There is probably a more technical explanation for all this but playing around with quickly I was able to achieve what I believe you're looking for with the following css. You might need to fiddle a bit to get it exactly how you need, particularly the height of the mission banner when you add more content:
.mission {
background-image: url(../images/img-mission-background.jpg);
position: absolute;
top: 70px;
width: 100%;
height: 100%;
}
.mission-banner {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
height: 200px;
background-color: black;
}
margin:auto will center the div horizontally, use flex box
.mission{
display: flex;
justify-content: center;
flex-direction: column;
}
flex-direction lets you decide whether to align your content vertically with column or horizontally with row
https://www.w3schools.com/css/css3_flexbox.asp
i added background:red so it will be more clear that the div ( mission-banner ) is in the center vertically
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
height: 180px;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 100%;
height: 400px;
display: flex;
background: red;
display: flex;
justify-content: center;
flex-direction: column;
}
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
Related
I want to achieve this desktop design.
The mobile design has been completed but when I try changing the mobile design to desktop design, I am using a specific flex property row-reverse. When I use the row-reverse property the result looks like this
I am unable to figure out how to fix the position to achieve the desktop design and have been stuck on this problem for the past few days.
Could someone please tell me what am i doing wrong and how do i fix this issue.
#import url('css-reset.css');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap');
:root {
--color-main-background: hsl(233, 47%, 7%);
--color-card-background: hsl(244, 38%, 16%);
--color-soft-voilet: hsl(277, 64%, 61%);
--color-white-main: hsl(0, 0%, 100%);
--color-white-paragraph: hsla(0, 0%, 100%, 0.75);
--color-white-stats: hsla(0, 0%, 100%, 0.6);
--font-weight-four: 400;
--font-weight-seven: 700;
}
body {
background-color: var(--color-main-background);
font-weight: var(--font-weight-four);
color: var(--color-white-main);
margin: 0;
}
.container {
display: grid;
grid-auto-flow: row;
border-radius: 10px;
justify-content: center;
text-align: center;
align-self: center;
max-width: 350px;
min-height: 750px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
/* padding: 0 2rem; */
background-color: var(--color-card-background);
overflow: hidden;
}
/* .main-img {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
} */
picture>* {
width: 100%;
max-height: 100%;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main-header {
font-family: 'Lexend Deca',
sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.5rem;
color: var(--color-white-main);
margin-top: 20px;
}
.insight {
color: var(--color-soft-voilet)
}
.h1-first,
.h1-second {
display: block;
}
.stats,
.heading {
display: block;
}
.paragraph {
margin-top: 5px;
margin-bottom: 30px;
}
.para-1,
.para-2,
.para-3,
.para-4 {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.875rem;
color: var(--color-white-paragraph);
display: block;
line-height: 1.75;
}
.stats {
color: var(--color-white-main);
font-family: 'Inter', sans-serif;
font-weight: var(--font-weight-seven);
font-size: 1.25rem;
margin-top: 10px;
}
.heading {
font-family: 'Inter',
sans-serif;
font-weight: var(--font-weight-four);
font-size: 0.7rem;
color: var(--color-white-stats);
margin-bottom: 20px;
}
#media (min-width:768px) {
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: row-reverse;
min-height: 400px;
max-width: 50rem;
overflow: hidden;
}
picutre {
max-width: 100%;
max-height: 100%;
}
picture>* {
width: 100%;
height: 400px;
border-top-left-radius: 0px;
}
.img-component {
position: relative;
}
.img-component::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: hsl(277, 64%, 61%, 0.5);
border-top-left-radius: 0px;
border-top-right-radius: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Stats preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
</style>
</head>
<body>
<div class="container">
<div class="img-component">
<picture>
<source media="(min-width: 768px)" srcset="/images/image-header-desktop.jpg">
<source media="(min-width: 100px)" srcset="/images/image-header-mobile.jpg">
<img class="main-img" src="/images/image-header-mobile.jpg" alt="main image">
</picture>
</div>
<div class="main-header">
<h1><span class="h1-main"> Get <span class="insight">insights</span> that</span>
<span class="h1-first">help your business</span>
<span class="h1-second"> grow.</span></h1>
</div>
<div class="paragraph">
<p>
<span class="para-1"> Discover the benefits of data</span>
<span class="para-2">analytics and make better decisions</span>
<span class="para-3">regarding revenue, customer</span>
<span class="para-4">experience, and overall efficiency.</span>
</p>
</div>
<div class="stat-heading">
<span class="stats">10k+</span>
<span class="heading">COMPANIES</span>
<span class="stats">314</span>
<span class="heading">TEMPLATES</span>
<span class="stats">12M+</span>
<span class="heading">QUERIES</span>
</div>
</div>
</body>
</html>
Hope this will help to restructure your section.
I basically tried to roughly replicate your design using a slightly different approach:
So given the main div (container), let's split it in half creating 2 child div into it, aligning them with d-flex applied to the container.
Into the left one, let's create 2 other divs: one which will contain the header and paragraph and the other which will contain the 3 stats and heading. I will then suggest to wrap each stats and heading into they own div, this will help you to correctly align them on desktop and mobile using d-flex, and related flex-directions.
html,
body {
height: 100%;
}
div {
border: 2px solid red
}
.container {
display: flex;
align-items: center;
}
.box-left {
width: 50%;
background-color: blueviolet;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-right {
width: 50%;
background-color: brown;
height: 500px;
width: 50%;
background-image: url(https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
background-size: cover;
}
.box-bottom {
display: flex;
justify-content: space-between;
}
.text-wrapper {
padding: 50px;
}
#media (max-width:768px) {
.container {
flex-direction: column-reverse;
}
.box-left,
.box-right {
width: 100%;
}
.box-left {
text-align: center;
}
.box-bottom {
display: flex;
flex-direction: column;
justify-content: center;
}
}
<body>
<div class="container">
<div class="box-left">
<div class="text-wrapper">
<div>
<h1>Your title here</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English.</p>
</div>
<div class="box-bottom">
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
<div>
<h2>10k</h2>
<p>SOMETHING</p>
</div>
</div>
</div>
</div>
<div class="box-right">
</div>
</div>
</body>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design?
Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<title>Johnson's Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
</body>
</html>
body{
width: 100%;
height: 100%;
margin: 0;
}
#navbar li, a{
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black; font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav{
width: 100%;
display:block;
background-color:red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection{
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1{
margin: auto;
}
#welcomesection p{
text-align: center;
}
.avatar img{
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects{
width: 100%;
height: 150vh;
background-color:blue;
}
#projects h2{
text-decoration: underline;
text-align: center;
}
Is the h2 margin you can remove it and add a padding
body {
width: 100%;
height: 100%;
margin: 0;
}
#navbar li,
a {
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black;
font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav {
width: 100%;
display: block;
background-color: red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection {
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1 {
margin: auto;
}
#welcomesection p {
text-align: center;
}
.avatar img {
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects {
width: 100%;
height: 150vh;
background-color: blue;
}
#projects h2 {
text-decoration: underline;
text-align: center;
margin-top: 0;
padding-top: 20px;
}
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page
<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
I'm working on a project and my CSS doesn't seem to be cascading correctly.
I have set some styles (mainly the color property) at the HTML tag level. However it is not cascading to the rest of my elements, specifically the .logo class, but also some other classes. Can anyone help me understand why this is happening?
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: Helvetica, Arial, sans-serif;
color: seashell;
background-color: black;
text-align: center;
font-size: 22px;
opacity: 0.9;
}
/* Header and Nav Bar */
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 69px;
width: 100%;
position: fixed;
top: 0;
z-index: 10;
border-bottom: 1px solid seashell;
}
.logo {
margin-left: 10px;
max-height: 50px;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
padding: 15px;
}
.navigation a:hover {
text-decoration: none;
}
/******* Hero *******/
#hero {
background-image: url(/Images/img-mission-background.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
top: 70px;
height: 700px;
width: 1200px;
margin: auto;
opacity: 0.8;
}
#hero h2,
h4 {
padding: 12px;
}
/***** Content ******/
.content {
position: relative;
top: 100px;
}
<!--******* Header ******* -->
<header class="header">
<img src="/Images/img-tea-cozy-logo.webp" alt="Tea Cozy Logo" class="logo" />
<ul class="navigation">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</header>
<section id="hero">
<h2>Our Mission</h2>
<h4>
Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
</h4>
</section>
<section class="content">
<h1>Tea of the Month</h1>
</section>
Expected result - the third blue box should be a little towards the right
i am unable to use left functon after doing position relative in the userated div . im trying to say that instead of moving right, it is just increasing in size . Below is a picture to help you understand what i am saying . after that i wrote all the html and css code.
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
ul.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 100%;
top: 30px;
align-items: center
}
.bar {
height: 100px;
width: 100%;
justify-content: left;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
}
.link1 {
margin-left: 30px;
text-decoration: none;
color: black;
font-size: 20px
}
.signin {
background: linear-gradient(to right, blue, rgb(20, 196, 255));
height: 38px;
width: 120px;
position: relative;
text-align: center;
font-size: 18px;
border-radius: 20%;
;
left: 200px;
top: -10px
}
.sign {
top: 15%;
position: relative;
color: white;
text-decoration: none
}
.introbox {
width: 700px;
height: 200px;
background-image: url('wal.jpg');
opacity: 0.75;
left: 25%;
position: relative;
background-position: center;
top: 10px;
border-radius: 5px;
font-weight: 600;
box-shadow: 0px 2px 5px;
}
.new {
font-size: 30px;
left: 6%;
position: relative;
font-weight: 400
}
.box1 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600;
}
.lnlink {
text-decoration: none;
color: black;
}
.lightnovel1 {
display: flex;
flex-direction: row;
position: relative;
height: 580px;
width: 900px;
background: red;
left: 5%;
}
.ww {
margin: 20px;
height: 260px;
width: 180px;
font-size: 20px;
font-weight: 600
}
.pic2 {
height: 80%;
width: 100%
}
.ranki {
font-size: 15px
}
.ranktitle {
position: relative;
left: 5%;
font-size: 30px;
font-weight: 400
}
.ranking {
height: 580px;
width: 900px;
background: yellow;
display: flex;
flex-direction: row;
position: relative;
left: 5%;
}
.topview {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
background: blue;
}
.li {
float: left;
}
.newtrends {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: 5%
}
.userrated {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
background: blue;
position: relative;
left: -5%
}
<div class="bar">
<! me might not come for 2 month here or disc>
<nav>
<ul class="navlist">
<li><img src="background.png"></li>
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
<li>
<div class="signin"><a href="#" class='sign'>Sign In</a></div>
</li>
</ul>
</nav>
</div>
<div class="introbox">
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels? Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is
updated instantly on the Light Novel Pub and notification service is provided to the readers.
</p3>
Start reading now to explore this mysterious fantasy world.
</div>
<br>
<br>
<div class="release">
<div class="title1">
<h3 class="new">New Ongoing Release</h3>
</div>
<div class="lightnovel1">
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
<div class="ww">
<img src="martialart.jpg" class="pic2">
Martial Art System
<div class="ranki">
<p2> Rank 1 </p2>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="ranktitle"> Ranking </div>
<div class="ranking">
<div class="misc">
<h2>Trending</h2>
<div class="topview" id="topviewid">
</div>
</div>
<div class="misc1">
<h2>most viewed</h2>
<div class="newtrends">
</div>
</div>
<div class="misc2">
<h2>User Rated</h2>
<div class="userrated">
</div>
</div>
</div>
float: right or left is causing this result
Your .userrated and .newtrends classes are both positioned in relation to their normal position. If you move the second div by 5% it overlaps with the third. If you now move the third by 5% you would moved them both by the same distance so they won't show a gap.
If you want the same gap between the second and the third div you need to set the third's left value to 10%.
I want the div with the heading, p text, and image to be aligned in the center of the page and also not have all that space between each tag. I think I was able to center-align it correctly but I'm having trouble removing all that distance between the text and image. I want a bit of space between them, but not as much space where it looks too far away and makes the page too long.
I'm using Dreamweaver and when I preview the webpage in Chrome browser, it shows the heading, p text and image all having a bunch of space between them - like they're too spaced away from each other. (Also, for some reason it doesn't look as spaced out when I run the code snippet here like it does in Dreamweaver?) I hope this makes sense, if not I can elaborate more. Thank you.
*{
margin: 0;
padding: 0;
font-family: lato, sans-serif;
}
.hero{
width: 80%;
margin: auto;
}
.navbar{
margin: 30px auto;
display: flex;
align-items: center;
height: 25px;
}
ul{
flex: 1;
text-align: right;
}
ul li{
display: inline-block;
list-style: none;
margin: 0 25px;
}
ul li a{
text-decoration: none;
color: black;
padding: 0 10px;
position: relative;
}
ul li a::after{
content: '';
width: 0;
height: 10px;
background: #f14a60;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -35px;
transition: 0.5s;
}
ul li a:hover::after{
width: 100%;
}
.banner{
display: flex;
margin-top: 80px;
}
.center-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
.center-column p {
text-align: center;
width: 80%;
padding-top: 0px;
margin-top: 46px;
margin-right: 46px;
margin-bottom: 46px;
margin-left: 46px;
position: relative;
top: -11%;
}
.menu {
top: -75px;
position: relative;
}
<body>
<div class="hero">
<div class="navbar">
<img id="logo" src="../Images/logo-1.png" width="180" alt="logo">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Promotions</li>
</ul>
</div>
<div class="banner">
<div class="center-column">
<h1 style="font-size: 50px; padding-top: 30px"><span>Our</span> Menu</h1>
<p class="center-column p">We start bright and early each morning preparing exceptional ingredients to deliver a breakfast and brunch experience that feels good and tastes even better.</p>
<img class="menu" src="../images/menu.png" width="800" alt="restaurant menu">
</div>
</div>
</div>
</body>
You are giving the same parent class to Paragraph tag. So it's min-height becomes also 100vh. You can practice this one.
* {
margin: 0;
padding: 0;
font-family: lato, sans-serif;
}
.hero {
width: 80%;
margin: auto;
}
.navbar {
margin: 30px auto;
display: flex;
align-items: center;
height: 25px;
}
ul {
flex: 1;
text-align: right;
}
ul li {
display: inline-block;
list-style: none;
margin: 0 25px;
}
ul li a {
text-decoration: none;
color: black;
padding: 0 10px;
position: relative;
}
ul li a::after {
content: "";
width: 0;
height: 10px;
background: #f14a60;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -35px;
transition: 0.5s;
}
ul li a:hover::after {
width: 100%;
}
.banner {
display: flex;
margin-top: 80px;
}
.center-column {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
min-height: 140vh;
}
.center-column p {
text-align: center;
width: 80%;
padding-top: 0px;
margin-top: 46px;
margin-right: 46px;
margin-bottom: 46px;
margin-left: 46px;
position: relative;
top: -11%;
}
.menu {
top: -75px;
position: relative;
}
<div class="hero">
<div class="navbar">
<img
id="logo"
src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png"
width="180"
alt="logo"
/>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Menu
</li>
<li>
Promotions
</li>
</ul>
</div>
<div class="banner">
<div class="center-column">
<h1 style={{ fontSize: "50px", paddingTop: "30px" }}>
<span>Our</span> Menu
</h1>
<p class=" p">
We start bright and early each morning preparing exceptional
ingredients to deliver a breakfast and brunch experience that
feels good and tastes even better.
</p>
<img
class="menu"
src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png"
width="300"
height="300"
alt="restaurant menu"
/>
</div>
</div>
</div>