change permalinks to 'Postname' cause Page Not Found

Question

I have a query to fetch all post from a custom post type device and I want to display 3 post per page. using the next and previous link, I able to navigate the next page where another 3 post can see. it work perfectly with the default permalink which is

  //the default permalink of wordpress
http:mywebsite/?p=123

and I need to change it into Post name for SEO purposes which is like this:

http:mywebsite/sample-post/

and then suddenly the problem appear.

I've searching and reading more blog/article but I can't find any helpful suggestion. I'm so stuck with this problem it give me a headache.

by the way I used this query:

   <?php
     if (have_posts()) : {
     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
     query_posts('showposts=3&post_type=advice'.'&paged='.$paged);} ?>

      <ul class="adviceLandingPage">

      <?php while(have_posts()) : the_post(); ?>

       <li>
         <span><?php the_title(); ?></span>
         <span><?php $excerpt = get_the_excerpt(); echo string_limit_words($excerpt,20); ?></span>

       </li>

       <?php endwhile; ?>
          <li class="navigation">
             <?php posts_nav_link(); ?>
          </li>
       </u>
     <?php endif; ?>

thank you for any suggestion.

Edit:

when I navigate to the next page, where I assume to see the next 3 post, this is the error Page not found.

and this is the .htaccess after changing the permalink to %postname%

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /bryan/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /bryan/index.php [L]
</IfModule>

# END WordPress

Answer 1

Run the following commands

NB: The $ Is not part of the commands

$ sudo a2enmod rewrite

$ cd /var/www/html

$ ls -al

$ sudo touch .htaccess

$ sudo nano .htaccess

Modify your .htaccess file to look the snippet above

# BEGIN WordPress

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

# END WordPress

---

$ sudo chmod 644 .htaccess

$ sudo nano /etc/apache2/sites-available/000-default.conf

Make sure the AllowOverride All is set

<Directory "/var/www/html">
    AllowOverride All
</Directory>

---

$ sudo /etc/init.d/apache2 restart

See the link below for more on this.

https://sachinparmarblog.com/fixing-permalinks-on-wordpress-to-use-postname/