Павел

Смотрите не CSS, а исходный текст страницы. Какой путь к css файлу указан там? Возможно, вы криво перенесли сайт и в базе остались ссылки на локальный хост.

У вас же min-width - минимальная ширина. А ширина задана в 100%. Т.е. 100% окна, но не меньше 1020px. А вот больше - пожалуйста.

bx slider? bxslider.com/examples/thumbnail-pager-2

Для каждого типа страницы свой php шаблон. редактировать можно в любой IDE или редакторе, подключаетесь по фтп и вперед. Файлы темы хранятся в wp-content/themes/ваша_тема. Но там много php и очень мало html) вот здесь наглядна показана иерархия шаблонов https://codex.wordpress.org/images/1/18/Template_H...
Также не забудьте предотвратить обновление темы. Можно её переименовать, а можно создать дочернюю тему https://codex.wordpress.org/Дочерние_темы

api.jquery.com/css

Создаете, например, glavnaya.php в папке с темой. В нем пишите:

<?php
/*
Template Name: glavnaya
*/
?>
<?php get_header(); ?>

	<?php if (have_posts()) : ?>
            <?php while (have_posts()):the_post(); ?>
/*здесь контент страницы в нужной вам разметке */
                <h1><?php the_title();?></h1>
                <?php the_content();?>
                    <?php endwhile;?>
                    <?php else : ?>
                    <?php endif; ?>

<?php get_footer(); ?>

И такой шаблон для каждой нужной страницы.

В админке при редактировании страницы, выбираете "шаблон страницы" и выбираете один из созданных. В настройках сайта в "общих", вроде бы, так же стоит указать "главную страницу" как одну из статических, если вы делаете какую-то главную.

Здесь только обрезка. Но может пригодится dotdotdot.frebsite.nl

Помимо теории конечно нужна практика. На ютубе есть пару каналов, где люди просто показывают как верстают сайты от и до. Поможет вам сложить все знания в кучу.

jquery $(window).resize() пробовали?
https://api.jquery.com/resize/

php storm, komodo edit умеют подключаться и открывать папку на ftp. Уверен, и другие IDE тоже.

Как-то так, если на скорую руку.

<style>
    .container{
        background-color: green;
        color: #ffffff;
        float: left;
        width: 100%;
    }
    .container:after {
        display: block;
        content: '';
        clear: both;
    } 
    .b {
        font-weight: bold;
        font-size: 20px;
    }
    .l {
        font-size: 15px;
    }
    li {
        float: left;
        text-align: center;
        width: 100px;
        border-left: 1px solid #fff;
        box-sizing: border-box;
    }
    li:last-child {
        border-right: 1px solid #fff;
    }
    ul {
        display: block;
        margin: auto;
        list-style-type: none;
        width: 500px;
    }
</style>
<div class="container">
    <ul>
        <li><p class="b">42</p><p class="l">Lorem</p></li>
        <li><p class="b">125</p><p class="l">Lorem</p></li>
        <li><p class="b">15</p><p class="l">Lorem</p></li>
        <li><p class="b">99</p><p class="l">lorem</p></li>
        <li><p class="b">25</p><p class="l">Lorem</p></li>
    </ul>
</div>