Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

Main Content Layout Breaks When I Add a New Section

$
0
0

Whenever I try to add a new section, my main content breaks, and I’m having trouble fixing it. I asked ChatGPT for help, but it’s been suggesting some weird solutions that I know would break my code even more. If you can help me fix it, I’d really appreciate it thank you!

  background-image: url('https://files.catbox.moe/wo1o4x.jpeg');  background-size: cover;  background-position: center;  background-repeat: no-repeat;  background-attachment: fixed;  /* font family */  font-family: 'Orbitron', sans-serif;  color: white;  /*make body flex ("Thanks to Heart helping me figure this out")*/  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  min-height: 100vh;  /* adjust to 100vh if want full viewport height */  margin: 0;  /* Remove default margin */  padding: 0;}.Main-content {  display: flex;  justify-content: center;  align-items: center;  text-align: center;  width: 100%;  height: 100%;}/* glass effect *//* From https://css.glass */.glass-effect {  background: rgba(255, 248, 248, 0.2);  border-radius: 16px;  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);  backdrop-filter: blur(5px);  -webkit-backdrop-filter: blur(5px);  border: 1px solid rgba(255, 248, 248, 0.3);  padding: 20px;  margin: auto;  margin-bottom: 50px;  /* Center the glass-effect div within Main-content */}img {  border-radius: 50%;  width: 120px;  height: 120px;}

Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>