html使两个按钮重叠,div按钮重叠HTML

我正在尝试为自己创建一个在线投资组合，我有一个底部容器用于屏幕的下半部分，我想在容器的顶部放置3个按钮。除非你调整页面大小，否则我可以使用它。缩小页面宽度时，按钮将重叠。如何阻止它们重叠？我希望他们并排靠近但不重叠。

＆＃13;

＆＃13;

h1 {

margin-left: 33%;

margin-right: 33%;

text-align: center;

}

img {

width: 15%;

height: auto;

display: block;

margin-left: auto;

margin-right: auto;

}

#top,

#bottom {

position: fixed;

left: 0;

right: 0;

height: 50%;

}

#bottom {

border-top: 2px solid black;

margin-left: auto;

margin-right: auto;

display: block;

float: center;

position: fixed;

border: 2px solid black;

padding: 15px;

padding-bottom: 17px;

}

#navbuttons {

border-top: 2px solid black;

margin-left: auto;

margin-right: auto;

display: block;

float: center;

position: relative;

border: 2px solid black;

padding: 15px;

padding-bottom: 10px;

}

#resumebutton {

display: inline-block;

position: absolute;

top: 0%;

left: 33%;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border: 2px solid black;

border-radius: 20px;

padding: 5px;

background-color: #7dd7f5;

text-align: center;

}

#coverletterbutton {

display: inline-block;

position: absolute;

top: 0%;

left: 46.5%;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border: 2px solid black;

border-radius: 20px;

padding: 5px;

background-color: #7dd7f5;

text-align: center;

}

#portfoliobutton {

display: inline-block;

position: absolute;

top: 0%;

left: 62.5%;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border: 2px solid black;

border-radius: 20px;

padding: 5px;

background-color: #7dd7f5;

text-align: center;

}＆＃13;

--Name Here-- Resume and Portfolio

--Name Here--

Resume and Portfolio

Resume

Cover Letter

Portfolio

＆＃13;＆＃13;＆＃13;

如果我知道如何，我会提供一个例子。

谢谢