How to position element in box? - html

Question

So I have managed to create these sections on my web page, each with an image and some text in them. However with these boxes, the text element (eg. text-lifestyle), is not positioning correctly where I want it to go? Is there a way of fixing this please... I am trying to get each text part either to the left or right of the image, positioned in the centre of that side of the box.
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 100%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search{
float: right;
margin-bottom: 1%;
margin-right: 7%;
position: relative;
margin-top: 1.7%;
}
nav input[type=text]{
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav .search input[type="text"]:focus {
width: 200px;
outline : none;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a{
color: rgb(95, 62, 64);
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(95, 62, 64);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(95, 62, 64);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.main-bg{
background-image: url("bg-two.jpg");
height: auto;
padding-top: 8em;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera*/
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.footer *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-two{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.footer ul{
list-style: none;
}
.footer{
background-color: rgb(241, 200, 203);
width: auto;
margin: auto;
padding-top: 3%;
line-height: 1.5;
}
.footer .container-bottom{
padding-left: 12%;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h5{
font-size: 112.5%;
color: rgb(126, 81, 83);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
}
.footer-col h5::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: rgb(82, 44, 46);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: rgb(126, 81, 83);
text-decoration: none;
font-weight: 600;
display: block;
}
.fab{
color:rgb(126, 81, 83);
margin-right: 10px;
}
.copyright{
margin-top: 5%;
text-align: center;
background-color: rgb(126, 81, 83);
color:rgb(240, 178, 182);
padding: 1%;
padding-left: 0%;
margin-bottom: 0%;
}
article h2{
color: rgb(240, 178, 182);
font-size: 280%;
text-align: center;
margin-top: 0%;
border-bottom: 1px solid rgb(240, 178, 182);
padding-bottom: 3px;
}
article p{
color:rgb(240, 178, 182);
font-size: 110%;
text-align: center;
}
.lifestyle{
height: 100%;
border:rgb(82, 44, 46);
border-radius: 10px;
background-color: rgb(82, 44, 46);
margin-left: 15%;
margin-right: 15%;
position: relative;
}
.lifestyle img{
margin: 5%;
width: 35%;
height: 50%;
position: relative;
}
.text-lifestyle{
position: relative;
align-items: center;
margin-left: 50%;
}
.entertainment{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.entertainment img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
.text-entertainment{
position: absolute;
margin: 15%;
top: 30%;
left: 7.5%;
box-sizing: border-box;
width: 30%;
}
.food{
height: 100%;
background-color:rgb(82, 44, 46);
margin: 15%;
}
.food img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
}
.text-food{
position: absolute;
top: 66.5%;
right: 22.5%;
box-sizing: border-box;
width: 30%;
}
.shopping{
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
}
.shopping img{
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
#media screen and (max-width: 768px) {
body{
font-size: 80%;
}
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
Here is the HTML Code. As you can see I have placed the text and image elements into boxes e.g. lifestyle, entertainment, food, shopping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class = "main-bg">
<article>
<div class = "lifestyle">
<img src='abt-one.jpg' alt />
<div class="text-lifestyle">
<h2>LIFESTYLE</h2>
<p>New York hosts its guests with some of the best 5-star hotels and restaurants, leisure activities and more.<br/>
Relax your mind and enjoy the breathtaking views of what New York has to offer...</p>
</div>
</div>
<div class = "entertainment">
<img src='abt-two.jpg' alt />
<div class="text-entertainment">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>ENTERTAINMENT</h2>
<p style= 'color: rgb(82, 44, 46);'>Music and entertainment is a big thing in this great city. Everywhere you go, entertainment will be right at your feet. Enjoy first class musicals at BroadWay Theatre or watch busking take place free of charge!</p>
</div>
</div>
<div class = "food">
<img src='abt-three.jpg' alt />
<div class="text-food">
<h2>FOOD</h2>
<p>Enjoy some of the best cuisines across the city.<br/>
From classic burgers to jaw-dropping desserts, there's nothing to miss out on.</p>
</div>
</div>
<div class = "shopping">
<img src='abt-four.jpg' alt />
<div class="text-shopping">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>SHOPPING</h2>
<p style= 'color: rgb(82, 44, 46);'>Feeling like treating yourself with some fancy shoes? New York streets are lined with fabulous, glamourous shops, all endorsed with the latest trends from across the world.</p>
</div>
</div>
</article>
<footer class="footer">
<div class="container-bottom">
<div class="row">
<div class="footer-col">
<h5>New York</h5>
<p style="color: rgb(126, 81, 83); font-weight: 600;">The largest and most influential American metropolis</p>
</div>
<div class="footer-col">
<h5>Links</h5>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><div class="footer-col">
<h5>Extras</h5>
<ul>
<li>Official NYC</li>
<li>New York Magazine</li>
<li>Eater New York</li>
<li>Curbed NY</li>
</ul>
</div><div class="footer-col">
<h5>Socials</h5>
<div>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
<div class="copyright">
<small>© New York 2021 | Designed by Priya Patel</small>
</div>
</footer>
</div>
</body>
</html>

Answer 1

is this what you are looking for? What I did is that I removed some of your top and right css selectors due to the fact that it often messes CSS up. I also added padding so the object would be better aligned. Here is my code, really hope this works for you!
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 100%;
margin: 0 1.5%;
}
header {
background: rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after {
content: "";
display: grid;
clear: both;
}
.logo {
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav {
float: inline-end;
overflow: auto;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
nav li {
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search {
float: right;
margin-bottom: 1%;
margin-right: 7%;
position: relative;
margin-top: 1.7%;
}
nav input[type=text] {
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav .search input[type="text"]:focus {
width: 200px;
outline: none;
}
nav input::placeholder {
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a {
color: rgb(95, 62, 64);
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: rgb(95, 62, 64);
}
nav a::before {
content: "";
display: block;
height: 10%;
background-color: rgb(95, 62, 64);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
.main-bg {
background-image: url("bg-two.jpg");
height: auto;
padding-top: 8em;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
animation: fadein 2s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera*/
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.footer * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-two {
max-width: 1170px;
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
.footer ul {
list-style: none;
}
.footer {
background-color: rgb(241, 200, 203);
width: auto;
margin: auto;
padding-top: 3%;
line-height: 1.5;
}
.footer .container-bottom {
padding-left: 12%;
}
.footer-col {
width: 25%;
padding: 0 15px;
}
.footer-col h5 {
font-size: 112.5%;
color: rgb(126, 81, 83);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
}
.footer-col h5::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: rgb(82, 44, 46);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: rgb(126, 81, 83);
text-decoration: none;
font-weight: 600;
display: block;
}
.fab {
color: rgb(126, 81, 83);
margin-right: 10px;
}
.copyright {
margin-top: 5%;
text-align: center;
background-color: rgb(126, 81, 83);
color: rgb(240, 178, 182);
padding: 1%;
padding-left: 0%;
margin-bottom: 0%;
}
article h2 {
color: rgb(240, 178, 182);
font-size: 280%;
text-align: center;
margin-top: 0%;
border-bottom: 1px solid rgb(240, 178, 182);
padding-bottom: 3px;
}
article p {
color: rgb(240, 178, 182);
font-size: 110%;
text-align: center;
}
.lifestyle {
height: 100%;
border: rgb(82, 44, 46);
border-radius: 10px;
background-color: rgb(82, 44, 46);
margin-left: 15%;
margin-right: 15%;
padding: 30px;
position: relative;
}
.lifestyle img {
margin: 5%;
width: 35%;
height: 50%;
position: relative;
}
.text-lifestyle {
position: relative;
align-items: center;
margin-left: 50%;
}
.entertainment {
margin-top: 15em;
height: 100%;
border: rgb(240, 178, 182);
border-radius: 10px;
background-color: rgb(240, 178, 182);
margin-left: 15%;
margin-right: 15%;
padding: 30px;
position: relative;
}
.entertainment img {
position: relative;
width: 29%;
height: 50%;
float: right;
}
.text-entertainment {
box-sizing: border-box;
width: 50%;
}
.food {
margin-top: 15em;
min-height: 278px;
border: rgb(82, 44, 46);
border-radius: 10px;
background-color: rgb(82, 44, 46);
margin-left: 15%;
margin-right: 15%;
padding: 30px;
position: relative;
}
.food img {
position: relative;
width: 29%;
height: 50%;
}
.text-food {
box-sizing: border-box;
width: 30%;
float: right;
}
.shopping {
height: 100%;
background-color: rgb(240, 178, 182);
margin: 15%;
padding: 30px;
border-radius: 10px;
}
.shopping img {
margin: 5%;
position: relative;
width: 29%;
height: 50%;
margin-left: 65%;
}
#media screen and (max-width: 768px) {
body {
font-size: 80%;
}
h1 {
font-size: 312%;
}
a {
font-size: 80%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class="main-bg">
<article>
<div class="lifestyle">
<img src='abt-one.jpg' alt />
<div class="text-lifestyle">
<h2>LIFESTYLE</h2>
<p>New York hosts its guests with some of the best 5-star hotels and restaurants, leisure activities and more.<br/> Relax your mind and enjoy the breathtaking views of what New York has to offer...</p>
</div>
</div>
<div class="entertainment">
<img src='abt-two.jpg' alt />
<div class="text-entertainment">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>ENTERTAINMENT</h2>
<p style='color: rgb(82, 44, 46);'>Music and entertainment is a big thing in this great city. Everywhere you go, entertainment will be right at your feet. Enjoy first class musicals at BroadWay Theatre or watch busking take place free of charge!</p>
</div>
</div>
<div class="food">
<img src='abt-three.jpg' alt />
<div class="text-food">
<h2>FOOD</h2>
<p>Enjoy some of the best cuisines across the city.<br/> From classic burgers to jaw-dropping desserts, there's nothing to miss out on.</p>
</div>
</div>
<div class="shopping">
<img src='abt-four.jpg' alt />
<div class="text-shopping">
<h2 style='color: rgb(82, 44, 46); border-bottom: 1px solid rgb(82, 44, 46);'>SHOPPING</h2>
<p class="text-shopping" style='color: rgb(82, 44, 46);'>Feeling like treating yourself with some fancy shoes? New York streets are lined with fabulous, glamourous shops, all endorsed with the latest trends from across the world.</p>
</div>
</div>
</article>
<footer class="footer">
<div class="container-bottom">
<div class="row">
<div class="footer-col">
<h5>New York</h5>
<p style="color: rgb(126, 81, 83); font-weight: 600;">The largest and most influential American metropolis</p>
</div>
<div class="footer-col">
<h5>Links</h5>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<div class="footer-col">
<h5>Extras</h5>
<ul>
<li>Official NYC</li>
<li>New York Magazine</li>
<li>Eater New York</li>
<li>Curbed NY</li>
</ul>
</div>
<div class="footer-col">
<h5>Socials</h5>
<div>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</div>
<div class="copyright">
<small>© New York 2021 | Designed by Priya Patel</small>
</div>
</footer>
</div>
</body>
</html>

Answer 2

I see you're using display: table. I would advise against using this because it is basically impossible to make your website responsive in a good manner. Rather than using display: table try using display: grid. More on css-grid here: https://css-tricks.com/snippets/css/complete-guide-grid/
Concering positioning elements on your webpage, a combination of css-grid and flexbox is the best and easiest way to achieve this, more on flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/