Just getting started with web development, very new to it. I am in the process of creating a SharePoint site for my workplace using the Modern Script Editor web part. The site will essentially be a resource page with linked buttons on it. I am facing difficulty centering the three columns and ensuring even space between them. Whenever I add more text into the buttons, they overlap each other. Any suggestions or advice would be greatly appreciated. Additionally, I need to include a quick link column on the right side of the page. Is there anything specific I should do differently with it on the HTML side? I understand that the visual appearance will be different for the quick links, so I will focus on the CSS aspect later. Fiddle
CSS
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
max-height: 100vh;
background-color: black;
}
header {
text-align: center;
}
.banner {
color: #fff; /* Example text color */
}
.banner h1 {
font-size: 50px;
margin: 15px;
padding: 0;
}
.sub-banner{
display: flex;
margin-left: 37%;
margin-right: 33%;
font-size: 40px;
flex: nowrap;
background-color:black;
color: white;
border: solid 3px gold;
border-radius: 5px;
}
.logos {
display: flex;
justify-content: space-between;
text-align: center;
align-items: center;
flex-grow: 1;
}
.logos a {
text-decoration: none;
}
.logos a h3 {
background: black;
border: solid 3px gold;
border-radius: 5px;
padding: 5px;
color: white;
}
.logos a:nth-child(2) {
color:black;
}
.logos a img {
max-width: 300px;
max-height: 175px;
}
main {
text-align: center;
flex-grow: 1;
}
#h3s {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 200px;
overflow-wrap: break-word;
justify-content: space-between;
margin:;
}
#h4s {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 200px;
overflow-wrap: break-word;
justify-content: space-between;
margin:;
}
#h5s {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 200px;
overflow-wrap: break-word;
justify-content: space-between;
margin:;
}
</style>
HTML
<body>
<header>
<div>
<button class="sub-banner">
Resources
</button>
</div>
</header>
<main>
<div class="logos">
<div id="h3s">
<a href="">
<h3>Linked Button sogdfgij fkdjg dfpgj ddfpigj</h3>
</a>
<a href="">
<h3>Linked Buttons idjf sgij sdipgj </h3>
</a>
<a href="">
<h3>Linked Button sogj dfoigj doifgj </h3>
</a>
</div>
<div class="logos">
<div id="h4s">
<a href="">
<h3>Linked Button dofijgodfigj doij </h3>
</a>
<a href="">
<h3>Linked Button pdofg pdofkg pofd kg</h3>
</a>
<a href="">
<h3>Linked Button dpfgj dpiogj dpiogdj p od </h3>
</a>
</div>
<div class="logos">
<div id="h5s">
<a href="">
<h3>Linked Button</h3>
</a>
<a href="">
<h3>Linked Button</h3>
</a>
<a href="">
<h3>Linked Button</h3>
</a>
</div>
</div>
</main>
Tried setting 33% margins for each column and various adjustments but still facing issues.