I can't seem to find a way to center a div element within a section within background image

I’ve been trying to make the welcome text div to center horizontally and vertically within the section that has the violin image background. I tried using margin:auto within a give height but it doesnt seem to work. I tried to check the box of the welcome-text div by giving it border with border-color:black border-width: 10px but the border doesnt show either. Is there something I’m missing here?
Also if someone can give me tips to structure my code better I will appreaciate it. I struggle find a good approach due to my inexperience.

The code:


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">

<header id="header">
  <div id="header-img"> <!--make this group flex--><!--insert image-->
    <div id="logo-text">

  <nav id="nav-bar">
    <ul id="nav-container"> <!--flex-->
      <li class="nav-link"><a ref="#">About</a></li>
      <li class="nav-link"><a ref="#">Pricing</a></li>
      <li class="nav-link"><a ref="#">FAQ</a></li>

  <div id="welcome-text">
    Welcome text

  <div id="video-text">
      Check Out Our Session
  <div id="video-container">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"  frameborder="0" allowfullscreen></iframe>
  <div id="pricing-container">
      <div class="pricing box">
      <div class="pricing box">
      <div class="pricing box">

    <label id="email-label">
      Interested? Contact Us!
    <input type="email" id="email" name="email" placeholder="Enter our email here">


  This is footer
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Playfair+Display&display=swap');

html body{

  font-family: "Playfair Display", serif;
  left:0; */
  box-sizing: border-box;
  background: rgba(0,0,0,0.1);



  font-size: 30px;

nav ul{
  list-style: none;

  background: url('https://s3-ap-southeast-2.amazonaws.com/ish-oncourse-scc/3826cfee-4658-4f82-a72d-f16a322862a7');
  background-position: center;
  width: 100%;
  height: 50vh;
  z-index: -1;


body {
  background-color:rgb(4, 41, 58) ;



  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
  flex-grow: 1;

#video-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;

  flex-grow: 1;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

hopefully this solves your problem
all you needed to do was make the image section a flexbox and justify and align items to center
but not gonna lie that took me more than i expected to figure out the solution

1 Like

I eventually tried that solution, and yes it does work! Thank you for your reply my friend, happy coding!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.