Jump to content
i can spell html5!

<h1> and <p> coliding within top header

Recommended Posts

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>

<header id="header">

<IMG SRC="favorite.jpg">  

<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;
  }
}
 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...