Struggling to eliminate the small white space at the top and right side of my design, as well as aligning links in the center when the browser is resized to under 1000px. Links are centered above 1000px.
https://i.sstatic.net/9Nfhp.png
* {
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>