<h1> and <p> coliding within top header

i can spell html5! · September 7, 2020

so far my header is looking somewhat better but in media quarries when i remover the floats thats seems to put my h1 and p(both within my top header) coliding into each other and the image to the leaft. if i remove the floats with media quarries how do i prevent this. thanks.

the code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>inahurry</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
<body>

<div class=”container”>
<h1> Nerdypoker.com</h1>
</div>
<div class=”container”>
<p>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</p>
</div>
<div class=”container”>
</div>
</header>

</body>
</html>

and the css:

body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#FDFEFE ;
}

/* Global */
.container{
width:80%;
margin:auto;
overflow:hidden;
}

/* Header **/
header{
width:80%;
margin:auto;
overflow:hidden;
background: #F2F4F4;;
color:#ffffff;
padding-top:0px;
min-height:70px;

}

#header img {
   padding-top: 0px;
   float:left;
   display: inline;

}

header h1{
   display: inline;
   float:right;
   color:red;
margin-right:650px;
margin-top:10px;
}

header p{
   display: inline;
   padding-top: 80px;
   padding-left: 30px;
   position: relative;
   float:left;
   color:black;

}

/* Media Queries */
@media(max-width: 768px){
header #branding, header h1, header h2,
header p{
float:none;
text-align:center;
width:100%;
color:blue;
}
}

dsonesuk · September 8, 2020

Display inline basically gives you the same effect as float, remove this.

Sign In

<h1> and <p> coliding within top header

Recommended Posts

i can spell html5!

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity