[Solved] Website Body Items All Moved to the Left!

Coding Help
, ,
1

I need some immediate help! Everything from the website is moved to the left, and I don’t know why! I don’t know what I did wrong!

Click here to see the website.

Here is my CSS code if you need it:

    <style>
    /* MAIN STYLES FOR HOMEPAGE */



body { 
  font-family: Arial, Helvetica, sans-serif;
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,255,255,1) 100%);


}

.header { 

  overflow: hidden; 

 /* background-color: #f1f1f1; */

  padding: 20px 10px;

}

.header a { 

  float: left; 

  color: white; 

  text-align: center; 

  padding: 12px; 

  text-decoration: none; 

  font-size: 18px; 

  line-height: 25px; 

  border-radius: 4px;

}

.header a.logo {

  font-size: 25px; 

  font-weight: bold;

}

.header a:hover { 

  background-color: #dddddd; 

  color: white;

}

.header a.active { 

  background-color: dodgerblue; 

  color: white;

}

.header-right { 

  float: right;

}

@media screen and (max-width: 500px) { 

  .header a {

    float: none;

    display: block; 

    text-align: left;

  } 

  .header-right { 

    float: none; 

  }
  
a {
  text-decoration: ;
  color: white;
/* END OF MAIN STYLING FOR HOMEPAGE */
/* LOGIN AREA  - INPUT PASSWORD STYLING */
 /* This is the number password styling for the code on the login page. (index.html)*/

          input[type="password"] { 

            width: 100px;

            padding: 10px;

            font-size: 16px; 

            border: 1px solid #ccc;

            border-radius: 4px;

          }

/* END OF LOGIN AREA - INPUT PASSWORD STYLING */

</style><style>
  
  /* BUTTON CSS */
  
  
  
  
  
  /* html for  this button is below 

<button class="button-29" role="button">Button 29</button>

*/

/* CSS is below */

.button-29 {

  align-items: center;

  appearance: none;

  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);

  border: 0;

  border-radius: 6px;

  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;

  box-sizing: border-box;

  color: #fff;

  cursor: pointer;

  display: inline-block;

  font-family: "JetBrains Mono",monospace;

  height: 48px;

  justify-content: center;

  line-height: 1;

  list-style: none;

  overflow: hidden;

  padding-left: 16px;

  padding-right: 16px;

  position: relative;

  text-align: left;

  text-decoration: none;

  transition: box-shadow .15s,transform .15s;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

  white-space: nowrap;

  will-change: box-shadow,transform;

  font-size: 18px;

}

.button-29:focus {

  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;

}

.button-29:hover {

  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;

  transform: translateY(-2px);

}

.button-29:active {

  box-shadow: #3c4fe0 0 3px 7px inset;

  transform: translateY(2px);

}

    </style>

If you can help, thank you very much! I appreciate it!

Edits

  1. fixed description on beginning, don’t mind this. =)[on March 27, 2025
  2. changed optional tags, don’t mind this. =)[on March 28, 2025
  3. changed title to “[Solved]” [on March 28, 2025]

Post was solved by @wh0 on March 28, 2025! Thanks for helping me figure that out! =)

2

I’m going to assume you’re on a very old OS and browser? If so, have a look at The menus in my project are mixed together - #16 by Pomax

1 Like
3

btn/submitbutton-style.css

body {
            /* ... */
            display: flex; /* <- this */
1 Like
5

To answer the link you attached to your message, I’m afraid I didn’t use Glitch’s custom-made CSS, and I used my own CSS…

6

Thank you so much! It worked!

1 Like
7

Thanks for helping me @wh0! I removed “display: flex;” from my code and it worked! I could’ve never figured this out on my own, so again, thank you!