Padding and removing white in css

Question

New to the world of html and css, and currently making my own one page website.

I'm having a couple of issues with padding and removing white in css.

Firstly, i can't remove the block of white between the first page and second... Before i entered any text on the second page, it was fine? But now that some has been implemented onto the page, it has appeared?

Secondly, how does one push text right? I have a title in my nav bar, but it's not included in the unordered list? Have i set out my html correctly? Can css fix this? I've tried changing a few things on the html, but it just makes the situation even worse.

[ Problem with White space and title in top left[1]

HTML

<!DOCTYPE html>
<html>

<head>
  <link href="./Style.css" type="text/css" rel="stylesheet">
  <title> George Gilliland </title>
</head>

<body>
<div class = "Title-Page">
  <div class = "Nav">
    <ul>
      <li><a href="#About-Me">About Me</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
  </div>
     <h1 id = "Title"> George Gilliland </h1>
  </div>
</div>

  <div id = "About-Me">
     <p>
  Lorem ipsum dolor sit amet, ea nec oportere torquatos, has sumo <br>
  hinc vide et. In has aliquip eruditi, quis dicam sit ut.Tota 
  gubergren 
   </p>
  </div>

  <div id = "Projects">
  </div>

  <div id = "Contact">
  </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

 .Nav {
    border:1px solid #ccc;
    border-width:1px 0;
    font-family: Poiret One;
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 50cm;
}

.Nav ul {
  text-align: right;
}

.Nav li{
    display:inline;
}

.Nav a {
    display:inline-block;
    padding:10px;
}

body, html {
    height: 100%;
}

body {

  margin: 0;
  padding: 0;
  width: 100%;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

#Title {
  font-family: Poiret One;
  color: white;
  font-size: 60px;
  position: fixed;
  margin-top: 0;
}

#About-Me {
  background-color: #00818f;
  height: 100%;
}

h2.Font {
  font-family: Nixie One;
}

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
}

https://stackoverflow.com/questions/6929874/item-with-margin-top-has-margin-outside-of-containing-box — Temani Afif, Jan 14 '18 at 18:41
not sure if if you have more code, but the margin collpasing can be caused by the `p` and `h1` in your case — Temani Afif, Jan 14 '18 at 18:45

score 0 · Accepted Answer · edited Jan 15 '18 at 04:21

0

You can set a margin top of 0px on your about me P. See the codepen and code below.

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
  margin-top: 0px;
}

https://codepen.io/BobDempsey/pen/QaBGvz

edited Jan 15 '18 at 04:21

Nisse Engström

4,738
23
27
42

answered Jan 14 '18 at 18:37

Bob Dempsey

87
1
6

i thnk it's better to provide the exaplanation than one solution without any hint ... he can pick your code, fix the issue and when he will face it again he will get back to ask the same question. But if he understand what happening with this margin he will get it and he can find the fixes himself. – Temani Afif Jan 14 '18 at 18:44

Padding and removing white in css

1 Answers1