我只是想让它更广泛，但保持目前的风格，因为它看起来非常整洁。有没有一个简单的方法来做到这一点，或者我需要一个新的css文件，从头开始？这里的网站我对http://dashcraft.net/工作抱歉我有点生 rust 的html和css。

function CopyToClipboard(id) {
  var r = document.createRange();
  r.selectNode(document.getElementById(id));
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(r);
  document.execCommand('copy');
  window.getSelection().removeAllRanges();
}

:root {
  --primary-white: rgb(232, 230, 227);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url('../img/resibg.png');
  background-size: cover;
  color: var(--primary-white);
}

a {
  text-decoration: none !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* This is a for the icons */

.container {
  max-width: 640px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
}

ul.ks-cboxtags {
  list-style: none;
  padding: 20px;
}

ul.ks-cboxtags li {
  display: inline;
}

ul.ks-cboxtags li label {
  display: inline-block;
  background-color: rgba(255, 255, 255, .9);
  border: 2px solid rgba(139, 139, 139, .3);
  color: #adadad;
  border-radius: 25px;
  white-space: nowrap;
  margin: 3px 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all .2s;
}

ul.ks-cboxtags li label {
  padding: 8px 12px;
  cursor: pointer;
}

ul.ks-cboxtags li label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  padding: 2px 6px 2px 2px;
  content: "\f067";
  transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked+label::before {
  content: "\f00c";
  transform: rotate(-360deg);
  transition: transform .3s ease-in-out;
}

ul.ks-cboxtags li input[type="checkbox"]:checked+label {
  border: 2px solid #1bdbf8;
  background-color: #12bbd4;
  color: #fff;
  transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}

ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

ul.ks-cboxtags li input[type="checkbox"]:focus+label {
  border: 2px solid #e9a1ff;
}

/* This is for the icons */

h1 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

main {
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.players-playing {
  background-color: #FFF;
  color: black;
  padding: 0px 10px;
  border-radius: 5px;
}

.server-address-clipboard {
  display: flex;
  background-color: #FFF;
  color: #84878e;
  border-radius: 5px;
  margin-top: 30px;
  border-radius: 0px 10px 10px 0px;
}

.server-address-clipboard-icon {
  padding: 15px;
  border-right: 1px solid #CCC;
}

.server-address-clipboard-icon img {
  height: 15px;
}

.server-address {
  display: flex;
  align-items: center;
  padding: 0px 10px;
}

.server-address-clipboard-button {
  background: #12bbd4;
  color: #FFF;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 0px 5px 5px 0px;
  border: none;
  transition: .2s ease;
  padding: 0px 20px;
  text-transform: uppercase;
}

.server-address-clipboard-button:hover {
  background-color: #1565c0;
}

.extraClass {
  font-size: 14px !important;
}

.sidebar-logo img {
  height: 130px;
}

/* rules page */

.rules-box {
  background-color: #FFF;
  width: 85%;
  border-radius: 10px;
  margin: 100px 0px 30px 0px;
  z-index: 999;
}

.rule {
  padding: 20px 0px;
  color: #2f3542;
}

.main-rules {
  display: flex;
  justify-content: center
}

.css-18lrjg1-MuiCircularProgress-root {
  margin-top: 10px !important;
}

.MuiButtonBase-root {
  width: 100%;
}

.loading-area {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.server-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rule-content {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rule-content .rule-title {
  background: rgb(226, 232, 237);
  width: 260px;
  height: 20px;
}

.rule-content .rule-desc {
  background: rgb(226, 232, 237);
  width: 100%;
  height: 50px;
}

@media (max-width: 1024px) {
  .nav-container {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .rules-box {
    width: 95%;
  }
}

@media (max-width: 500px) {
  .bar-icon {
    display: flex;
  }
  .rule_title {
    text-align: center;
  }
}

@media (max-width: 465px) {
  h1 {
    font-size: 1.5em;
  }
  p {
    text-align: center;
  }
}

@media (max-width: 1270px) {
  body {
    background-size: auto;
  }

<p style="margin: 0px;">No 💩 Ads!</p>
<div class="server-address-clipboard">
  <div class="server-address-clipboard-icon">
    <img src="src/img/svgviewer-output.svg" />
  </div>
  <div class="server-address" id="sample">Find a Server...</div>
  <button id="button" class="server-address-clipboard-button">Go</button>
</div>