How to make twenty seventeen menu icon and text black color when layout is resized

By default, when you resize the screen using chrome responsive emulator, the menu bar cannot be seen because it is white, and the background is also white.

Solution is to change it to black by pasting this css code into the Additional CSS section of customization for twenty seventeen:

.menu-toggle {
    color: #000;
}

@media screen and (max-width: 768px) {
    .navigation-top .menu > .menu-item > a {
        color: #000;
    }
}

How to make posts full width in wordpress twenty seventeen

Paste this css in the customized css section of twenty seventeen:

.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
   max-width: 1000px;
}

.page-one-column .panel-content .wrap {
   max-width: 1000px;
}

@media screen and (min-width: 48em) {
    .blog:not(.has-sidebar) #primary article,
    .archive:not(.page-one-column):not(.has-sidebar) #primary article,
    .search:not(.has-sidebar) #primary article,
    .navigation.pagination,
    body.blog .site-content .page-header,
    body.archive .site-content .page-header,
    body.search .site-content .page-header {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 1000px;
        width: auto;
    }
}

References:

[ Sheriziya's solution works: ]

https://wordpress.org/support/topic/making-the-blog-page-one-columnfull-width/