li and parent div size mismatch

Question

practicing on css dropdown. In the following code, I have set the li as block display type. Now I want the size of the li (the green dropdown ones inside the grey colored parent div .dropdown) to be exactly the same horizontal size as of their parent div .dropdown . In the current case, their horizontal size is smaller (please see the screenshot below to understand better)

Kindly please provide a solution.

html,body {
    margin: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,1);
    padding: 0px;
    }


*{
    box-sizing:border-box;
}

a {
	color: rgba(0,0,0,1);
	text-decoration: none;
	/* [disabled]background-color: rgba(255,0,0,1); */
	display: block;
}

li {
	display: block;
	width: 100%;
	background-color: rgba(0,255,0,1);
	border: thin solid rgba(0,0,0,1);
	position: relative;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	top: 0px;
}

.dropdown a {
	/* [disabled]color: rgba(0,255,0,1); */
	display: block;
	text-decoration: none;
	list-style-type: none;
	/* [disabled]background-color: rgba(204,51,153,1); */
	width: 100%;
}

a:hover {
    color: rgba(0,0,255,1); 
}




.wrapper {
    height: 600px;
    max-width: 960px;
    margin-left: auto;
    left: 0px;
    top: 0px;
    background-color: rgba(204,204,204,1);
    margin-right: auto;
    position: relative;
    padding: 0px;
    margin-top: 0px;
}


.content {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    max-height: 200px;
    max-width: 600px;
    background-color: #FFF;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    text-align: center;
    border: 3px solid rgba(0,0,0,1);
    border-radius: 15px 15px 0px 0px;
    width: 100%;
}

.content-small {
    max-width: 100px;
    height: 100%;
    max-height: 50px;
    background-color: rgba(0,255,204,1);
    position: relative;
    margin-right: auto;
    margin-left: auto;
    border: 3px solid rgba(0,0,0,1);
    top: 5px;
  margin-top:10px;
}

.content-small:hover + .dropdown{
    visibility: visible;    
}

.dropdown:hover{
	visibility: visible;
}



.dropdown {
	background-color: rgba(214,214,214,1);
	max-width: 200px;
	height: 100%;
	max-height: 100px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	top: 0px;
	margin-top: 5px;
	visibility: hidden;
	list-style-type: none;
	text-align: center;
}

<div class="wrapper">
	<div class="content">
	  <div class="content-small">
		Home
        </div>
	  <ul class="dropdown">
<li><a href="">Home1</a></li>
<li><a href="">Home2</a></li>
		</div>
     
</div>

</div>

Answer 1

Did you try a CSS reset for margins and/or padding? The UL is one of the HTML elements that has margins applied in the default browser CSS.

For a quick fix try:

ul { margin: 0; padding: 0; }

Answer 2

Your <ul class="dropdown"> has some default studying for a <ul> tag in it, in this case padding-left:40px; and then the height attribute you gave it. try the following CSS:

.dropdown {
padding-left:0;
height:initial;
}

You can also just remove the height attribute

Answer 3

Adding padding:0 to your dropdown <ul>

html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 1);
  padding: 0px;
}
* {
  box-sizing: border-box;
}
a {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
  /* [disabled]background-color: rgba(255,0,0,1); */
  display: block;
}
li {
  display: block;
  width: 100%;
  background-color: rgba(0, 255, 0, 1);
  border: thin solid rgba(0, 0, 0, 1);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  top: 0px;
}
.dropdown a {
  /* [disabled]color: rgba(0,255,0,1); */
  display: block;
  text-decoration: none;
  list-style-type: none;
  /* [disabled]background-color: rgba(204,51,153,1); */
  width: 100%;
}
a:hover {
  color: rgba(0, 0, 255, 1);
}
.wrapper {
  height: 600px;
  max-width: 960px;
  margin-left: auto;
  left: 0px;
  top: 0px;
  background-color: rgba(204, 204, 204, 1);
  margin-right: auto;
  position: relative;
  padding: 0px;
  margin-top: 0px;
}
.content {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  max-height: 200px;
  max-width: 600px;
  background-color: #FFF;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  left: 0px;
  right: 0px;
  font-size: 32px;
  text-align: center;
  border: 3px solid rgba(0, 0, 0, 1);
  border-radius: 15px 15px 0px 0px;
  width: 100%;
}
.content-small {
  max-width: 100px;
  height: 100%;
  max-height: 50px;
  background-color: rgba(0, 255, 204, 1);
  position: relative;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid rgba(0, 0, 0, 1);
  top: 5px;
  margin-top: 10px;
}
.content-small:hover + .dropdown {
  visibility: visible;
}
.dropdown:hover {
  visibility: visible;
}
.dropdown {
  background-color: rgba(214, 214, 214, 1);
  max-width: 200px;
  height: 100%;
  max-height: 100px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  top: 0px;
  margin-top: 5px;
  visibility: hidden;
  list-style-type: none;
  text-align: center;
  padding:0;
}

<div class="wrapper">
  <div class="content">
    <div class="content-small">
      Home
    </div>
    <ul class="dropdown">
      <li><a href="">Home1</a>
      </li>
      <li><a href="">Home2</a>
      </li>
  </div>

</div>

</div>

The gray below the list items comes from the height you set on the <ul>