CODEWITHSUNDEEP
htmlcss
user8322222
user8322222

Reputation: 529

How to target h1 in div with CSS

I'm just making a mock website trying to learn to code and I'm having problems targeting h1 element in the divs. Another issue is that my banner is flowing further right than the top black menu bar causing the user to have to scroll right. I don't understand why this is. Would love all the help! Thanks!!

<!DOCTYPE html>

<html lang="eng">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css.css">
    <title> Sankyeat Kumar | Web Developer </title>
</head>

<body>
    <div id="menu">
        <div><a href="index.html">Home</a></div>
        <div><a href="portfolio.html">Portfolio</a></div>
        <div><a href="blog.html">Blog</a></div>
        <div><a href="contact.html">Contact</a></div>
    </div>

    <div id="banner">
        <div id="heading">
            <h1> Web Developer</h1>
            <h4>London Based Web Developer For hire</h4>
        </div>          
    </div>



    <h2> Services </h2>




</body>



</html>


body {
  margin:0px;
  padding:0px;
}

@media screen and (min-width: 480px) {

#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;

}

#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}

#menu div a {
color:white;    
text-decoration: none;
font-size: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
}

#menu div a:hover {
text-decoration: underline;
}

#banner {
height:100vh;
width:100vw;
background-image: url('images/mountains.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;

}

#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
{

 #banner #heading h1 {
 color: white;

 }


}

Upvotes: 1

Views: 13471

Answers (2)

zik
zik

Reputation: 3085

If you want to target h1 elements inside a div you can use the following:

div > h1 {
  //css goes here
}

This will target elements that are direct children of a <div>

Upvotes: 0

Shafikul Islam
Shafikul Islam

Reputation: 359

for targeting h1 you can use this-
you had a mistake on closing tag of css #heading

#banner {
  width:100%;
 /*100vw is getting a bit larger than screen because scrool bar on the right racking a little space from your screen*/

  width:calc(100vw - 17px);
 /* you can use this also. it minuses the scrolls width from screen width.*/
}


body {
  margin:0px;
  padding:0px;
}

@media screen and (min-width: 480px) {

#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;

}

#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}

#menu div a {
color:white;    
text-decoration: none;
font-size: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
}

#menu div a:hover {
text-decoration: underline;
}

#banner {
height:100vh;
width:100%;
width:calc(100vw - 17px);
background-image: url('images/mountains.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;

}

#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

 #banner #heading h1 {
 color: red;
}

}
<!DOCTYPE html>

<html lang="eng">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css.css">
    <title> Sankyeat Kumar | Web Developer </title>
</head>

<body>
    <div id="menu">
        <div><a href="index.html">Home</a></div>
        <div><a href="portfolio.html">Portfolio</a></div>
        <div><a href="blog.html">Blog</a></div>
        <div><a href="contact.html">Contact</a></div>
    </div>

    <div id="banner">
        <div id="heading">
            <h1> Web Developer</h1>
            <h4>London Based Web Developer For hire</h4>
        </div>          
    </div>



    <h2> Services </h2>




</body>



</html>

Upvotes: 1

Related Questions