Переместить боковую панель слева направо в теме bsed html-5

Я загрузил тему на основе HTML5. Но я хочу, чтобы боковая панель была удобной. Вот HTML-код и CSS, соответствующие боковой панели страницы.

Я попытался переместить боковую панель вправо, экспериментируя с кодом, но мне это не удалось.

При необходимости я могу опубликовать весь HTML-код.

#sidebar {
  margin-right: 3em;
  min-width: 22em;
  width: 22em;
  float: right;
}

#sidebar>* {
  border-top: solid 1px rgba(160, 160, 160, 0.3);
  margin: 3em 0 0 0;
  padding: 3em 0 0 0;
  float: right;
}

#sidebar> :first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  float: right;
}

@media screen and (max-width: 1280px) {
  #sidebar {
    border-top: solid 1px rgba(160, 160, 160, 0.3);
    margin: 3em 0 0 0;
    min-width: 0;
    padding: 3em 0 0 0;
    width: 100%;
    overflow-x: hidden;
    float: right;
  }
}

  <html>
 <head>
    <title>Future Imperfect by HTML5 UP</title>
    <meta charset = "utf-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1, user- 
  scalable=no" />
    <link rel = "stylesheet" href = "assets/css/main.css" />
 </head>
<body class = "is-preload">

    <!-- Wrapper -->
        <div id = "wrapper">


 <header id = "header">
<h1><a href = "index.html">Future Imperfect</a></h1>
<nav class = "links">
    <ul>
        <li><a href = "#">Lorem</a></li>
        <li><a href = "#">Ipsum</a></li>
        <li><a href = "#">Feugiat</a></li>
        <li><a href = "#">Tempus</a></li>
        <li><a href = "#">Adipiscing</a></li>
    </ul>
   </nav>
    <nav class = "main">
    <ul>
        <li class = "search">
            <a class = "fa-search" href = "#search">Search</a>
            <form id = "search" method = "get" action = "#">
                <input type = "text" name = "query" placeholder = "Search" />
           </form>
        </li>

        <li class = "menu">
            <a class = "fa-bars" href = "#menu">Menu</a>
        </li>
    </ul>
 </nav>
  </header>

            <!-- Header -->

            <!-- Menu -->



      <section id = "menu" float = "right">

                    <!-- Search -->
                        <section>
                            <form class = "search" method = "get" action = "#">
                                <input type = "text" name = "query" 
          placeholder = "Search" />
                            </form>
                        </section>

                    <!-- Links -->
                        <section>
                            <ul class = "links">
                                <li>
                                    <a href = "#">
                                        <h3>Lorem ipsum</h3>
                                        <p>Feugiat tempus veroeros dolor</p>
                                    </a>
                                </li>
                                <li>
                                    <a href = "#">
                                        <h3>Dolor sit amet</h3>
                                        <p>Sed vitae justo condimentum</p>
                                    </a>
                                </li>
                                <li>
                                    <a href = "#">
                                        <h3>Feugiat veroeros</h3>
                                        <p>Phasellus sed ultricies mi 
               congue</p>
                                    </a>
                                </li>
                                <li>
                                    <a href = "#">
                                        <h3>Etiam sed consequat</h3>
                                        <p>Porta lectus amet ultricies</p>
                                    </a>
                                </li>
                            </ul>
                        </section>

                    <!-- Actions -->
                        <section>
                            <ul class = "actions stacked">
                                <li><a href = "#" class = "button large fit">Log 
           In</a></li>
                            </ul>
                        </section>

                </section>

            <!-- Main -->
                <div id = "main">

                    <!-- Post -->


                <!--    <!-- Post -->


                        <article class = "post">
                            <header>
                                <div class = "title">
                                    <h2><a href = "single.html"><?php echo 
                   "$title"; ?> 
                                </div>
                                <div class = "meta">
                                    <time class = "published" datetime = "2015- 
               10-25">October 25, 2015</time>
                                    <a href = "#" class = "author"><span 
                    class = "name"><?php echo "$author" ;?></span><img 
              src = "images/<?php echo "$image"; ?>" alt = "" /></a>
                                </div>
                            </header>
                            <a href = "single.html" class = "image featured"><img 
                     src = "images/pic02.jpg" alt = "" /></a>
                            <p><?php echo "$content"; ?></p>
                            <footer>
                                <ul class = "actions">
                                    <li><a href = "single.html" class = "button 
                    large">Continue Reading</a></li>
                                </ul>
                                <ul class = "stats">
                                    <li><a href = "#">General</a></li>
                                    <li><a href = "#" class = "icon fa- 
           heart">28</a></li>
                                    <li><a href = "#" class = "icon fa- 
                   comment">128</a></li>
                                </ul>
                            </footer>
                        </article>








                    <!-- Post -->


                    <!-- Pagination -->
                        <ul class = "actions pagination">
                            <li><a href = "" class = "disabled button large 
              previous">Previous Page</a></li>
                            <li><a href = "#" class = "button large next">Next 
             Page</a></li>
                        </ul>

                </div>

            <!--sidebar-->

                    <!-- Posts List -->




                    <section id = "sidebar">

                    <!-- Intro -->
                        <section id = "intro">
                            <a href = "#" class = "logo"><img 
              src = "images/logo.jpg" alt = "" /></a>
                            <header>
                                <h2>Future Imperfect</h2>
                                <p>Another fine responsive site template by 
           <a href = "http://html5up.net">HTML5 UP</a></p>
                            </header>
                        </section>

                    <!-- Mini Posts -->
                        <section>
                            <div class = "mini-posts">

                                <!-- Mini Post -->
                                    <article class = "mini-post">
                                        <header>
                                            <h3><a href = "single.html">Vitae 
           sed condimentum</a></h3>
                                            <time class = "published" 
           datetime = "2015-10-20">October 20, 2015</time>
                                            <a href = "#" class = "author"><img 
           src = "images/avatar.jpg" alt = "" /></a>
                                        </header>
                                        <a href = "single.html" class = "image"> 
            <img src = "images/pic04.jpg" alt = "" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class = "mini-post">
                                        <header>
                                            <h3><a href = "single.html">Rutrum 
                   neque accumsan</a></h3>
                                            <time class = "published" 
              datetime = "2015-10-19">October 19, 2015</time>
                                            <a href = "#" class = "author"><img 
         src = "images/avatar.jpg" alt = "" /></a>
                                        </header>
                                        <a href = "single.html" class = "image"> 
        <img src = "images/pic05.jpg" alt = "" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class = "mini-post">
                                        <header>
                                            <h3><a href = "single.html">Odio 
                 congue mattis</a></h3>
                                            <time class = "published" 
               datetime = "2015-10-18">October 18, 2015</time>
                                            <a href = "#" class = "author"><img 
                 src = "images/avatar.jpg" alt = "" /></a>
                                        </header>
                                        <a href = "single.html" class = "image"> 
                 <img src = "images/pic06.jpg" alt = "" /></a>
                                    </article>

                                <!-- Mini Post -->
                                    <article class = "mini-post">
                                        <header>
                                            <h3><a href = "single.html">Enim 
               nisl veroeros</a></h3>
                                            <time class = "published" 
             datetime = "2015-10-17">October 17, 2015</time>
                                            <a href = "#" class = "author"><img 
            src = "images/avatar.jpg" alt = "" /></a>
                                        </header>
                                        <a href = "single.html" class = "image"> 
           <img src = "images/pic07.jpg" alt = "" /></a>
                                    </article>

                            </div>
                        </section>
                     <section>
                            <ul class = "posts">
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href = "single.html">Lorem 
              ipsum fermentum ut nisl vitae</a></h3>
                                            <time class = "published" 
             datetime = "2015-10-20">October 20, 2015</time>
                                        </header>
                                        <a href = "single.html" class = "image"> 
               <img src = "images/pic08.jpg" alt = "" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a 
                 href = "single.html">Convallis maximus nisl mattis nunc id 
     lorem</a></h3>
                                            <time class = "published" 
               datetime = "2015-10-15">October 15, 2015</time>
                                        </header>
                                        <a href = "single.html" class = "image"> 
               <img src = "images/pic09.jpg" alt = "" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href = "single.html">Euismod 
             amet placerat vivamus porttitor</a></h3>
                                            <time class = "published" 
           datetime = "2015-10-10">October 10, 2015</time>
                                        </header>
                                        <a href = "single.html" class = "image"> 
              <img src = "images/pic10.jpg" alt = "" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href = "single.html">Magna 
                    enim accumsan tortor cursus ultricies</a></h3>
                                            <time class = "published" 
                   datetime = "2015-10-08">October 8, 2015</time>
                                        </header>
                                        <a href = "single.html" class = "image"> 
                <img src = "images/pic11.jpg" alt = "" /></a>
                                    </article>
                                </li>
                                <li>
                                    <article>
                                        <header>
                                            <h3><a href = "single.html">Congue 
                   ullam corper lorem ipsum dolor</a></h3>
                                            <time class = "published" 
                datetime = "2015-10-06">October 7, 2015</time>
                                        </header>
                                        <a href = "single.html" class = "image"> 
                <img src = "images/pic12.jpg" alt = "" /></a>
                                    </article>
                                </li>
                            </ul>
                        </section>

                    <!-- About -->
                        <section class = "blurb">
                            <h2>About</h2>
                            <p>Mauris neque quam, fermentum ut nisl vitae, 
        convallis maximus nisl. Sed mattis nunc id lorem euismod amet 
      placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at 
         phasellus sed ultricies.</p>
                            <ul class = "actions">
                                <li><a href = "#" class = "button">Learn More</a> 
             </li>
                            </ul>
                        </section>

                    <!-- Footer -->
                        <section id = "footer">
                            <ul class = "icons">
                                <li><a href = "#" class = "fa-twitter"><span 
               class = "label">Twitter</span></a></li>
                                <li><a href = "#" class = "fa-facebook"><span 
         class = "label">Facebook</span></a></li>
                                <li><a href = "#" class = "fa-instagram"><span 
            class = "label">Instagram</span></a></li>
                                <li><a href = "#" class = "fa-rss"><span 
            class = "label">RSS</span></a></li>
                                <li><a href = "#" class = "fa-envelope"><span 
                 class = "label">Email</span></a></li>
                            </ul>
                            <p class = "copyright">&copy; Untitled. Design: <a 
               href = "http://html5up.net">HTML5 UP</a>. Images: <a 
                href = "http://unsplash.com">Unsplash</a>.</p>
                        </section>

                </section>

        </div>

    <!-- Scripts -->
        <script src = "assets/js/jquery.min.js"></script>
        <script src = "assets/js/browser.min.js"></script>
        <script src = "assets/js/breakpoints.min.js"></script>
        <script src = "assets/js/util.js"></script>
        <script src = "assets/js/main.js"></script>

</body>
             </html>

Пожалуйста, опубликуйте полный html как в начале, если возможно ...

— 25.06.2018 19:38

добавил весь html @NanditaAroraSharma .... я добавлю весь css, если потребуется

— 25.06.2018 19:54

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

— 25.06.2018 20:13

html css

25.06.2018 19:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

440

Ответы 1

Проблема в том, что вы используете float. Поскольку вы применяете его к каждому элементу в #sidebar, все перемещается вправо, что вызывает некоторые странные вещи.

Вместо этого удалите все атрибуты float и попробуйте следующее:

#sidebar {
  margin-right: 3em;
  min-width: 22em;
  width: 22em;
  text-align: center;
}

#sidebar>* {
  border-top: solid 1px rgba(160, 160, 160, 0.3);
  margin: 3em 0 0 0;
  padding: 3em 0 0 0;
  padding-left: 800px;
}

Я удалил float: right из обоих объявлений, потому что он вам не нужен, я добавил text-align: center в #sidebar, потому что он будет центрировать ваш текст, и я добавил padding-left: 600px, который переместит все в правую часть страницы. Я протестировал его в своем браузере, используя ваш HTML, и он отлично работает.

Однако я не знаю, как вы хотите, чтобы он выглядел точно, поэтому, очевидно, настройте его по мере необходимости.

25.06.2018 23:16