Menu with h2 tag ppears on mobile size with extra distances

HTML & CSS
1

On mobile level extra distances appears please help me


* {
  box-sizing: border-box;
}
.nav{
	height:auto;
	border:1px solid red;}
h2{}
h2 a {
  font-size:20px;
  width:94px;
  height:30px;
  padding:4px 6px;
  font-size:18px;
  margin:0px;
  text-decoration:none;
  display:inline-block;
  
}
h2 a:link, a:visited {
  background-color: white;
  color: purple;
  border: 1px solid green;
  text-align: center;
  
}
h2 a:hover {
	background-color: lightgreen;
    color: red;}
h2{display: inline-block;}
#right{float:right;}
h1	{position:relative;
	color:green;
	left:25px;}
@media screen and (max-width: 600px) {
  h2 {
    float: none;
    width: 50%;
  }
  h2 a {
     width: 100%;
  }
  #right{float:none;}
}

<div class="nav" >
<h1>Navigation</h1>

<h2><a href="#">link 1</a></h2>
<h2><a href="#">link 2</a></h2>
<h2><a href="#">link 3</a></h2>
<h2><a href="#">link 4</a></h2>
<h2><a href="#">link 5</a></h2>
<h2 id="right"><a href="#">Login/Reg</a></h2>
</div>
2

[code not appearing](https://code not appearing)

<head>
<style>
* {
  box-sizing: border-box;
}
.nav{
	height:auto;
	border:1px solid red;}
h2{}
h2 a {
  font-size:20px;
  width:94px;
  height:30px;
  padding:4px 6px;
  font-size:18px;
  margin:0px;
  text-decoration:none;
  display:inline-block;
  
}
h2 a:link, a:visited {
  background-color: white;
  color: purple;
  border: 1px solid green;
  text-align: center;
  
}
h2 a:hover {
	background-color: lightgreen;
    color: red;}
h2{display: inline-block;}
#right{float:right;}
h1	{position:relative;
	color:green;
	left:25px;}
@media screen and (max-width: 600px) {
  h2 {
    float: none;
    width: 50%;
  }
  h2 a {
     width: 100%;
  }
  #right{float:none;}
}   
</style>
</head>
<body>
<div class="nav" >
<h1>Navigation</h1>

<h2><a href="#">link 1</a></h2>
<h2><a href="#">link 2</a></h2>
<h2><a href="#">link 3</a></h2>
<h2><a href="#">link 4</a></h2>
<h2><a href="#">link 5</a></h2>
<h2 id="right"><a href="#">Login/Reg</a></h2>
</div>
</body>
</html>
3

Which distance are you referring to, the space to the right, or the gaps from the text to the border?
Either way, this space is because you set the width to 50%.
If its the vertical gap, that’s the default margins of h2.
Off-topic, I would question the semantics of using h2 for navigation.

1 Like
4

I suggest you use flex instead of floats as it’s easier to manage and more reliable and up to date. As Sam said above the H2’s are not semantic and indeed totally unnecessary in that structure.

The gap is just the default margins on the h2 coming into effect when you go into one column.

Here’s a quick rejig to a more modern approach and more semantic and accessible code (still room for improvement though).

2 Likes
5

Thank you for email. Yes I am referring to gaps between h2. I was thinking h2 statements. The idea was applying h2might influence search engine to make it working more effective but it looks like I made mistake, thank you, frank