-1

I am trying to recreate the google site, for practice with CSS and HTML. I have a pretty good grasp on floats, and have my div elements where I want them to be. However, I've run into a few problems. (Note, the colors are just to help me track the div while I'm practising, I will end up changing that)

This is what I'm getting.

My questions are 1, where are the margins coming from, as i have not set any, and 2, where is the extra padding on the left side of the ul coming from, I want to get rid of the empty space.

#google-logo {
  height: 100px;
  width: 100px;
  float: left;
  background-color: gray;
}
div {
  box-sizing: border-box;
}
header {
  height: 100px;
}
#searchbar, #navbar {
  height: 50px;
  float: left;
  background-color: blue;
  width: 600px;
}
#navbar {
  clear: left;
  background-color: red;
  padding: 0 11px;
}
#encompass {
  box-sizing: border-box;
  height: 100px;
  float: left;
}
li {
  display: inline-block;
  padding: 5px;

}
ul, li {
  height: 50px;
  box-sizing: border-box;
  margin: none;
}
<header>
  <div id="google-logo"></div>
  <div id="encompass">
  <div id="searchbar"></div>
  <div id="navbar">
      <ul style="float: left;">oof
          <li>Home</li>
          <li>Images</li>
          <li>Idk</li>
      </ul>
      <ul style="float: right;">
          <li>Settings</li>
          <li>Account</li>
      </ul>
  </div>
  </div>
</header>
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
PVT_Mozart
  • 25
  • 3
  • 1
    Most browsers have default styles such as margins and padding which will automatically be applied to certain elements. You can override that by setting your own styles or look into a CSS reset. – j08691 Oct 30 '18 at 14:08
  • 1
    "none" is not a valid value for `margin` so you aren't removing the default margin from the `ul` – Turnip Oct 30 '18 at 14:08
  • 1
    For the defaults check out this SO: https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements – scrappedcola Oct 30 '18 at 14:09
  • Try to avoid using floats. floating elements is disadvantageous and buggy too. on top of it. It will increase work load upon you. Happy Learning. – vssadineni Oct 30 '18 at 14:17
  • @vssadineni yeah, im not a huge fan of floats if I don't have to but I'm still learning. Thanks for the input everyone – PVT_Mozart Oct 30 '18 at 14:48

1 Answers1

2

You need to remove browsers default style by setting margin:0 and padding:0 to ul it is default user agent stylesheet that you need to override as shown below.

ul{
   margin:0;
   padding:0;
}
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37