顶部白色 space + 链接未居中

Question

我想弄清楚如何让白色 space 不出现在顶部和右侧（这是一条小白线，但我仍然能注意到它）。此外，当我将浏览器调整到 1000 像素以下时，我的链接似乎没有居中对齐。它们在 >1000px 时居中。

* {
  box-sizing: border-box;
}

@media screen and (max-width:1000px) {
  .navbar {
    display: block;
  }
  .navbar a {
    float: none;
    width: 40%;
  }
}

.buttonsTop {
  text-align: center;
  outline-color: blue;
  outline-width: 1px;
  outline-style: inset;
}

.navbar {
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin: 5px;
  font-size: 35px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  outline-color: red;
  outline-width: 1px;
  outline-style: inset;
}

.navbar a:hover {
  color: red;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transform: scale(1.3);
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
}

<div class="topImage">
  <div class="buttonsTop">
    <div class="navbar"><a href="#">Home</a></div>
    <div class="navbar"><a href="#aboutmeSection">About Me</a></div>
    <div class="navbar"><a href="#">Portfolio</a></div>
    <div class="navbar"><a href="#">Contact</a></div>
  </div>
</div>

Answer 1

我已经稍微更新了代码。希望这可以帮助。我还没有清理你的代码。请使用一些重置 CSS 或自己编写一个来重置用户代理样式

.buttonsTop{
  text-align: center;
  outline-color:blue;
  outline-width:1px;
    outline-style:inset;
}
.navbar{
    display:inline-block;
    text-align: center;  
    padding-left: 5px;
    margin: 5px;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;  
}
.navbar a{
 float: left;
 display: block;
 color: black;
 text-align: center;
 padding: 12px;
 text-decoration: none;   
 -moz-transition: all 1s;
 -webkit-transition: all 1s;
 -o-transition: all 1s;
 -ms-transition: all 1s; 
outline-color:red;
outline-width:1px;
outline-style:inset;    
}
.navbar a:hover {
 color:  red;
 -moz-transition: all .5s;
 -webkit-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
     
 transform : scale(1.3);
 -moz-transform : scale(1.3);
 -webkit-transform : scale(1.3);
 -o-transform : scale(1.3);
 -ms-transform : scale(1.3);
}

<head>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
@media screen and (max-width:1000px){
     .buttonsTop {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
     .navbar{       
        display:block;
        width: 40%;
     }  
    .navbar a{
        float: none;       
    }
     
}
</style>
<title> MySite </title>
</head>
<body>
<div class= "topImage">
<div class="buttonsTop">
 <div class= "navbar"><a href="#">Home</a></div>
 <div class= "navbar"><a href="#aboutmeSection">About Me</a></div>
 <div class= "navbar"><a href="#">Portfolio</a></div>
 <div class= "navbar"><a href="#">Contact</a></div>
   </div>
 
</div>
</body>

顶部白色 space + 链接未居中

White space at the top + links not centered

html

css

hyperlink