0

How do I move the image to the center of the screen so it's not covered by the logo?

What I want to achieve

What I made

This is what I have right now. I copied the code from the landing page I made but when I insert the image it shows up on the top left of the screen. What should I change to move the image to the center of the screen?

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo
{
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

header ul li {
    list-style: none;
    margin-left: 20px;
   
}
header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: white;
    border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
    background: white;
    color: #2b1055;
}
<!doctype HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles2.css">
<title>Business Plan</title>
<body>
<section>
    <header>
        <a href="#" class="logo"><img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;"></a>
        <ul class="navigation">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Creations</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>
<div class="container">
<div class="box">
    <div class="imgBx">
        <img src="hd1.jpg">
    </div>
</div>

</section>
</body>
    </head>
</html>
smolbunny
  • 55
  • 3
  • Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically). Also, your HTML is invalid: `` should come just before the `` tag. – kmoser Apr 14 '22 at 04:23

1 Answers1

0

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(#98c9cd 3%, #e6c3c1 60%, #e4989e 100% )
}
header {
    width: 100%;
    padding: 20px 100px;
    display: block;
    
}

header .logo
{
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

header ul li {
    list-style: none;
    margin-left: 20px;
   
}
header ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: white;
    border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
    background: white;
    color: #2b1055;
}
<!doctype HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles2.css">
<title>Business Plan</title>
<body>
<section>
    <header>
        <div class="container justify-content-center">
            <div class="box">
                <div class="imgBx">
                    <img src="hd1.jpg">
                </div>
            </div>
        </div>
        <div class="container-fluid px-0 d-flex align-items-center">
        <a href="#" class="logo"><img src="finallogo.png" width="10%" height="18%" style="margin-top: 20px;"></a>
        <ul class="navigation">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Creations</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </header>


</section>
</body>
    </head>
</html>

Firstly, you don't close your container. Moreover, header no need to be absolute position. means that it will be your header, so it knows on it's own its position. I tried to make your header dispay block so , your container with the image will align at the top and down from this will be the container-fluid. Check the bootsrap classes I wrote, if they are not working write them using CSS. Hope it works.

pcharalam
  • 3
  • 1
  • 3