Jump to content

<h1> and <p> coliding within top header


i can spell html5!
 Share

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...