Help Can't fix spacing between yellow and gray

HTML-CSS
1 
<html>
  <head>
    <style type="text/css">
      .Div2{
        height:25px;
		background-color: #FFDB50;
	}
      .header img{
			Float: left;
        width: 100px;
        height: 100px;
        Background-color: #F5F5F5;
      }
      .title{
        background-color:#F5F5F5;
        min-height: 150px;
      }
      .header h1{
        font-family:"Roboto";
        Font:16px;
        color: #1a1446;

      }
      .header h2{
        font-family:"Roboto";
        Font:36px;
        color: #1a1446;
      }

      .outage{
          font-family:"Roboto";
          font:10px;

      }
		p{
			text-indent: 25px;
		}

      h5{
        Text-align:left;
        Font-size:16.0;
        color: #1a1446;
        background-color: white;
      }
        h3{
        Text-align:left;
        Font-size:16.0;
        color: #1a1446;
        background-color: white;
      }
      Div1{
        padding: 100px;
        color: #1a1446;
      }
      html{
        background-color:#E7E5E6;
      }
      body{
        background-color:white;
      }
      a:link {
        color: blue;
        Padding-left: 100px;
        text-decoration: underline;
        text-underline: single;
      }
      a:visited {
        color: purple;
        text-decoration: underline;
        text-underline: single;
      }
      a:hover {
        Color: red;
      }
      Footer{
        width: auto;
        color: #1a1446;
        background-color: #FFDB50;
      }
    </style>
	  <div class="div2">
   </div>
    <div class="header">
      <div
        margin-left: 40px;
        > <img src="http://image.email-libertymutual.com/lib/feca16727264077a/m/1/09059027-992d-47f6-b819-901a336fead7.png" alt="logo"/></div>

      <div class="title">
          <h1> A Message from </h1>
1 Like
2

On line 4, it should be .div2, not .Div2. It’s case sensitive.
If you want no spacing around the body, it’s this:

body {
  margin: 0;
}

There should be a style attribute wrapping the style.

3

Thank you I am learning both HTML and CSS on the fly!
I will give this a try

1 Like
4

I’m trying to get rid of this white block:

image
image916Ă—96 7.17 KB

5

Can you post the latest code on CodePen or JSFiddle? Then I’ll play with it and send you the code.

6

Here’s the code I updated the Div to be lower case - thank you for that i didn’t realize it was case sensitive and will write in just lower going forward.

<html>
  <head>
    <style type="text/css">
      .div2{
        height:25px;
		background-color: #FFDB50;
	}
      .header img{
		Float: left;
        width: 100px;
        height: 100px;
        Background-color: #F5F5F5;
      }
      .title{
        background-color:#F5F5F5;
        min-height: 150px;
      }
      .header h1{
        font-family:"Roboto";
        Font:16px;
        color: #1a1446;

      }
      .header h2{
        font-family:"Roboto";
        Font:36px;
        color: #1a1446;
      }

      .outage{
          font-family:"Roboto";
          font:10px;

      }
		p{
			text-indent: 25px;
		}

      h5{
        Text-align:left;
        Font-size:16.0;
        color: #1a1446;
        background-color: white;
      }
        h3{
        Text-align:left;
        Font-size:16.0;
        color: #1a1446;
        background-color: white;
      }
      Div1{
        padding: 100px;
        color: #1a1446;
      }
      html{
        background-color:#E7E5E6;
      }
      body{
        background-color:white;
      }
      a:link {
        color: blue;
        Padding-left: 100px;
        text-decoration: underline;
        text-underline: single;
      }
      a:visited {
        color: purple;
        text-decoration: underline;
        text-underline: single;
      }
      a:hover {
        Color: red;
      }
      Footer{
        width: auto;
        color: #1a1446;
        background-color: #FFDB50;
      }
    </style>
	  <div class="div2">
    </div>
    <div class="header">
      <div
        margin-left: 40px;
        > <img src="http://image.email alt="logo"/></div>

      <div class="title">
          <h1> A Message from </h1>
            <h2> GRS Technology - Business Services<h2>
7

By the way, text-underline: single is invalid. there’s no such thing as text-underline
also, a:link is invalid, it should just be a

1 Like
8

There was quite a few mistakes, here’s the fiddle I made: https://jsfiddle.net/nkd4sgh9/

9

Ha Learning mistakes :crazy_face: - guess I’ll go back to the drawing board on my resources lol

Looks like the white bar at the top is still there - do you know who I can merg the yellow and the grey so they are seamless?

10

The reason is because h1, h2, h3, h4, etc. all have margin or padding around them. I fixed this now with margin-top: 0; on the h1: https://jsfiddle.net/nkd4sgh9/1/

1 Like
11

So that’s a standard margin for h1??!!!
So by setting it to zero I am overriding the normal setting correct?

Thank you again for your assistance

12

Yes, that’s correct. Most HTML elements have their own styling by default, called “user agent styles”. If you know how to use Chrome Devtools, you can inspect them in there, like this (make sure you’re on the elements tab when you open the devtools):

1 Like