JTeich

Thanks so much, Tuanphan!
I was very confused at first, not being able to find this "list" section you were talking about, but it turns out you have to turn off Squarespaces's fancy "fluid engine" feature! This gives more design options.
I indeed found what you were talking about, and it's exactly what I need. Unfortunately the autoscroll feature seems to only be accessible to Business accounts.
All the same, this was the solution, so thank you so much!

1. Go into styles and spacing and change the site page width to be as wide as you need for the design, but be aware that the wider you make it the harder it is to make the design work well on tablet sized screens.
2. The space is appearing because you only have one section and it is not tall enough to fill the space, set the section height to L (Large).

Use this CSS code
body.view-list h1 { color: #f1f !important; }  

When you add a section > Choose List

Then choose a random list on right box.
Then Edit Content > Choose Banner Slideshow

Add to Africana Portal Page Header
<style> nav.Index-nav>div>a:nth-child(2) .Index-nav-indicator { background: green !important; } nav.Index-nav>div>a:nth-child(3) .Index-nav-indicator { background: #f1f; } nav.Index-nav>div>a:nth-child(4) .Index-nav-indicator { background: blue; } nav.Index-nav>div>a:nth-child(5) .Index-nav-indicator { background: black; } </style>  

Perfect! Thank you so much!

Try this:
.search-input::placeholder { color: white !important; }  

You can try this to help it stand out, add to Custom CSS:
.sqs-search-ui-button-wrapper { background: rgba(0,0,0,0.4); } Hope that helps!

Try adding to Home > Design > Custom Css
@media only screen and (max-width: 768px) { #block-yui_3_17_2_1_1668448990919_3400 { width: 100%; } #block-yui_3_17_2_1_1668448990919_3400 .intrinsic { width: 50%; float: left; } } Support me by pressing 👍  or marking as solution if this useful for you

data-section-id, if you use 7.1
If you use 7.0 & Index template, you can target Index Section ID.
If the template doesn't support Index page & is not 7.1, no way to target with tool
You can share link to page where you have problem, we can check & give id for you

Wow, i thought i had just copy and pasted (and tried it several times). Thank you so much!
It works :)

You can check my previous code.
we get the error due to some wrong ";"

You want to set style for h1 and tag in  #block-yui_3_17_2_1_1665779804803_49707 ,right?
You should use the following code on Home > Design > Custom Css (not in the code injection)
#block-yui_3_17_2_1_1665779804803_49707 { h1 { color: White !important; font-family: Optima, sans-serif; } p { color: white !important; font-family: Optima, sans-serif; } }  

Wonderful!
It seems to work on Page Settings> Advanced  as well!
Thanks so much!!

Remove these symbols

It should be
#collection-62702969fd68866477d96224 h1 { color: #800032;!important; font-family: "Times New Roman", Times, serif !important; } h2 { color: red;!important; font-family: "Times New Roman", Times, serif !important; } h3 { color: blue;!important; font-family: "Times New Roman", Times, serif !important; } p { color: black !important; font-family: "Times New Roman", Times, serif !important; } a { color: blue !important; font-family: "Times New Roman", Times, serif !important; } .sqs-block-horizontalrule hr { background-color: blue; }  

Try adding to Design > Custom CSS
div#block-yui_3_17_2_1_1657223948810_4623 { position: absolute; top: 0; left: 0; width: 100%; z-index: 99999; padding: 0 !important; } div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 600px; } @media screen and (max-width:900px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top:300px; } } @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 100px; } }  

#1. Adjust some attributes to this
div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; padding: 15px 15px !important; font-family: Oswald !important; font-size: 15px; font-weight: 300 !important; font-style: normal; text-transform: capitalize; letter-spacing: .1em; color: blue; border-color: black; background-color: red; border: 2px solid black; border-radius: 10px; } #2. Add to Page Header
<style> div#block-yui_3_17_2_1_1657223948810_4623 .image-title p { font-size: 50px !important; display: block; text-align: left; } </style>  

Add to Design > Custom CSS
div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; background-color: red; padding: 5px; border: 2px solid blue; border-radius: 10px; }  

To move text to top left, add this to Page Header or Code Block
<style> .design-layout-poster .image-title-wrapper { position: absolute; top: 10px; left: 10px; } </style>  

I think you can add a Poster Block with Text + Text Link
Then I will give code to increase text size & move it to top left, change text link to button & move it to top right

If you use Business Plan, add this code to Page Settings > Advanced > Header
<style> /* Hide burger */ button.Mobile-bar-menu { visibility: hidden; } /* Hide mobile header */ .Mobile-bar.Mobile-bar--top { display: none; } /* hide footer */ footer.Footer { display: none !important; } </style> If you use Personal Plan, add this to Home > Design > Custom CSS. 
#collection-5ea442a78315084d6dba22b4, #collection-5ea4433089503f2e48088ef6 { /* Hide burger */ button.Mobile-bar-menu { visibility: hidden; } /* Hide mobile header */ .Mobile-bar.Mobile-bar--top { display: none; } /* hide footer */ footer.Footer { display: none !important; } }  

OK! I fumbled around with it, even erasing everything and inserting your code (which broke everything for some reason), Discarded my changes, inserted your code again, and it worked. Perhaps there's other code somewhere that it was dependent on that i deleted. Anyways, thank you so much! I'm going to cut and paste it again just so it's clear to me (and also added back on white arrows instead of the default green).
THANKS AGAIN!
<style>   /* accordion title color */ .sqs-block-accordion .accordion-item__title-wrapper {   background-color : #1a252f;   color : white;   padding-left : 20px;   padding-right : 20px;      } /* make first item round corner */ .sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper {   border-top-left-radius : 10px;   border-top-right-radius: 10px;      } .sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper {   border-bottom-left-radius : 10px;   border-bottom-right-radius: 10px;      } .sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper {   border-bottom-left-radius : unset;   border-bottom-right-radius: unset;      } .sqs-block-accordion .accordion-item__click-target {   padding-bottom : 15px !important;   padding-top : 15px !important;      } /* accordion content padding */ .sqs-block-accordion .accordion-item__description {   max-width : unset !important;   padding : 20px !important;      } /* accordion arrows color */ .accordion-block .arrow {     border-color: white !important; } </style>     

OK! I fumbled around with it, even erasing everything and inserting your code (which broke everything for some reason), Discarded my changes, inserted your code again, and it worked. Perhaps there's other code somewhere that it was dependent on that i deleted. Anyways, thank you so much! I'm going to cut and paste it again just so it's clear to me (and also added back on white arrows instead of the default green).
THANKS AGAIN!
<style>   /* accordion title color */ .sqs-block-accordion .accordion-item__title-wrapper {   background-color : #1a252f;   color : white;   padding-left : 20px;   padding-right : 20px;      } /* make first item round corner */ .sqs-block-accordion .accordion-item:first-child .accordion-item__title-wrapper {   border-top-left-radius : 10px;   border-top-right-radius: 10px;      } .sqs-block-accordion .accordion-item:last-child .accordion-item__title-wrapper {   border-bottom-left-radius : 10px;   border-bottom-right-radius: 10px;      } .sqs-block-accordion .accordion-item[data-is-open="true"]:last-child .accordion-item__title-wrapper {   border-bottom-left-radius : unset;   border-bottom-right-radius: unset;      } .sqs-block-accordion .accordion-item__click-target {   padding-bottom : 15px !important;   padding-top : 15px !important;      } /* accordion content padding */ .sqs-block-accordion .accordion-item__description {   max-width : unset !important;   padding : 20px !important;      } /* accordion arrows color */ .accordion-block .arrow {     border-color: white !important; } </style>     

The code you have installed is different from mine. After removing your code and putting mine in I get the following.

accordion demo.mp4  The lines are there but those can be turned off in the SS options for the accordion. The toggles can be colored but I'd wait until you get the basic effect going before adding that in.

Add to Design > Custom CSS
/* Calendar widget */ div#block-yui_3_17_2_1_1648740771065_12292 * { font-family: 'Karla' !important; font-size: 26px; } div#block-yui_3_17_2_1_1648740771065_12292 td.normal { background-color: #f2f2f2 !important; }