Flexbox SVG is not inlined with other elements

inline svg not displaying
svg viewbox
svg fill not working
inline svg vs img
ng-inline-svg
inline svg css
img svg fill not working
svg inline-block

I am trying align svg and few li elements inline which are wrapped by flexbox container.For some reason last svgs are not inlined with others. CSS:

.container{
    margin-left:20px;
    display:inline-flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;

}

.logo{
    width: auto;
    fill:orange;
    height: 57px;
}
.menu{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: space-between;
}
.menu li {
    padding:30px;
    list-style: none;
}
.secondmenu{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
}

.secondmenu  svg{
    padding: 10px;

    width: 3%;
  }

Here is the codepen with html:

https://codepen.io/anon/pen/eboMOQ

Here you go lastpeony4 cleaned up your code a little bit this should get you started. https://codepen.io/anon/pen/xmeWBO?editors=1100

.container{
    margin-left:20px;
    display:flex;
    flex-direction: row;
}
.logo{
    width: auto;
    fill:orange;
    height: 57px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  display: flex;
  flex-grow: 1;

}

ul li {
  padding: 1rem
}

.svg-container {
  display: flex;
}

.svg-container svg {
  height: 20px;
    padding: 1.8rem 1rem;
}

5 Gotchas You're Gonna Face Getting Inline SVG Into Production , Please note that this is not a persuasive article on why you should use inline SVG​. and, if so, removes all svg use elements, and replaces them with embedded elements I use Adobe Illustrator, but if you're using another vector program like​  Ugh. react-svg-flexbox to the rescue. You can fix the layouting problem with react-svg-flexbox.It’s a small library, not a lot of stars, but omg so perfect. Built on top of Facebook’s css-layout, which has recently become a part of yoga, it lets you use CSS flexbox to position SVG elements.

to place the whole menu in one line:

you just need in to change in your .container flex-wrap from wrap to nowrap

.container {
  margin-left: 20px;
  display: inline-flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: nowrap;
}

.container {
  margin-left: 20px;
  display: inline-flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: nowrap;
}

.logo {
  width: auto;
  fill: orange;
  height: 57px;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
}

.menu li {
  padding: 30px;
  list-style: none;
}

.secondmenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.secondmenu svg {
  padding: 10px;
  width: 3%;
}
<div class="container">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 58">
 <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 </svg>
  <div class="menu">

    <li>
      <a>
    <span>SHOP</span>
</a>

    </li>
    <li>
      <a>
    <span>BUNDLES</span>
</a>
    </li>
    <li>
      <a>
    <span>EXPLORE</span>
    </a>
    </li>


  </div>




  <nav class="secondmenu">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.5,26.8c-0.4,0-0.8-0.2-1.1-0.6C13.1,24.1,6.7,14,6.7,9.5c-0.1-5,3.8-9.1,8.8-9.3c1.1,0,2.2,0.2,3.2,0.7
								L19.1,1c0.6,0.3,1.1,0.6,1.6,1l0.3,0.3c0.3,0.2,0.5,0.5,0.8,0.8c0.4,0.4,0.7,0.9,1,1.4L23,4.7c0.1,0.1,0.1,0.3,0.2,0.4
								s0.1,0.3,0.2,0.4l0.2,0.4l0.2,0.4c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.4c0.1,0.5,0.2,1.1,0.2,1.6l0,0v0.3c0,1.2-0.3,2.4-0.7,3.5
								c-0.2,0.5-0.4,1.1-0.6,1.6c-0.1,0.3-0.3,0.7-0.5,1l-0.3,0.7L21.8,17l-0.3,0.7c-0.4,0.7-0.7,1.4-1.1,2c-0.2,0.4-0.5,0.9-0.7,1.3
								L19,22.2l-0.3,0.6c-1.2,2-2,3.3-2.1,3.4C16.4,26.6,16,26.8,15.5,26.8L15.5,26.8z M15.5,2.8c-3.6,0.1-6.3,3.1-6.2,6.7
								c0,2.7,3.6,9.4,6.2,13.6l1-1.6l0.3-0.5c0.2-0.4,0.5-0.8,0.7-1.2s0.5-0.8,0.7-1.2c0.4-0.7,0.7-1.3,1-2c0.1-0.2,0.2-0.4,0.3-0.7
								l0.3-0.7l0.3-0.6c0.1-0.3,0.3-0.6,0.4-1c0.2-0.5,0.4-1,0.6-1.5c0.3-0.9,0.6-1.8,0.6-2.7V9.3c0-0.4,0-0.8-0.1-1.2
								c0-0.1,0-0.2-0.1-0.3s-0.1-0.4-0.2-0.6l-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3S21,6.4,21,6.3S20.9,6.1,20.8,6l-0.1-0.1
								c-0.2-0.4-0.5-0.7-0.7-1c-0.2-0.2-0.4-0.4-0.5-0.6l-0.2-0.2c-0.4-0.3-0.8-0.5-1.2-0.8l-0.3-0.1C17,2.9,16.3,2.8,15.5,2.8z
								 M15.5,13.4c-2.6-0.1-4.6-2.2-4.6-4.8c0,0,0,0,0,0c-0.1-2.6,2-4.7,4.5-4.8l0,0c2.6,0,4.7,2.2,4.7,4.8c0,0,0,0,0,0
								C20.1,11.1,18.1,13.3,15.5,13.4L15.5,13.4z M15.5,6.4c-1.2,0.1-2,1.1-2,2.2c-0.1,1.2,0.8,2.2,2,2.2c1.2-0.1,2.1-1.1,2-2.2
								C17.6,7.4,16.7,6.4,15.5,6.4C15.5,6.3,15.5,6.3,15.5,6.4L15.5,6.4z"></path>
							</svg>







    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M15.3,15.7c-0.3,0-0.5-0.1-0.8-0.2L2,6.5C1.4,6.1,1.3,5.3,1.7,4.7S2.9,4,3.5,4.4l11.9,8.5l12.1-8.5
								C28,4,28.8,4.1,29.2,4.7c0.4,0.6,0.3,1.4-0.3,1.8l0,0l-12.8,9C15.9,15.6,15.6,15.7,15.3,15.7z"></path>
							<path  d="M27.3,6.3c0.1,0,0.1,0.1,0.1,0.1V21c0,0.1-0.1,0.1-0.1,0.1H3.7c-0.1,0-0.1-0.1-0.1-0.1V6.5
								c0-0.1,0.1-0.1,0.1-0.1H27.3 M27.3,3.8H3.7C2.2,3.8,1,5,1,6.5V21c0,1.5,1.2,2.7,2.7,2.7h23.6c1.5,0,2.7-1.2,2.7-2.7V6.5
								C30,5,28.8,3.8,27.3,3.8L27.3,3.8z"></path>
							</svg>






    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
							<path  d="M8.1,16.6c3,3,7.9,3,11,0s3-7.9,0-11s-7.9-3-11,0c-1.4,1.5-2.3,3.4-2.3,5.5C5.8,13.2,6.6,15.2,8.1,16.6z
							 M27.8,23.5c0.5,0.5,0.5,1.3,0,1.8c0,0,0,0,0,0c-0.5,0.5-1.3,0.5-1.8,0c0,0,0,0,0,0l-6-6c-4.5,3.5-11,2.7-14.6-1.8
							c-1.4-1.8-2.2-4.1-2.2-6.5c0-5.7,4.6-10.4,10.4-10.4C19.3,0.8,24,5.4,24,11.1c0,2.3-0.8,4.5-2.2,6.4L27.8,23.5z"></path>
						</svg>











    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 27" xml="preserve">
								<path  d="M24,18.8H10.3c-0.6,0-1.1-0.4-1.3-0.9L5.5,6.1L5.1,4.8c-0.3-1-1.1-1.6-2.1-1.7H1.3C0.6,3.2,0,2.7-0.1,2
									s0.5-1.3,1.2-1.4c0.1,0,0.2,0,0.2,0h1.6c2.1,0,3.9,1.4,4.6,3.4L8,5.2l0.3,1h21c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.3,1L30,14
									C29.6,16.9,27,19,24,18.8z M11.2,16.3H24c3.1,0,3.4-2.4,3.5-2.5l0.4-4.9H9L11.2,16.3z"></path>
								<path  d="M13.6,27c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2c0,0,0,0,0,0C16.7,25.6,15.3,27,13.6,27
									C13.6,27,13.6,27,13.6,27z M13.6,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0
									C14.2,23.5,13.9,23.2,13.6,23.2z"></path>
								<path  d="M25.3,27c-1.8,0-3.2-1.4-3.2-3.1c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1c0,0,0,0,0,0
									C28.4,25.6,27,27,25.3,27z M25.3,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6
									C25.9,23.5,25.6,23.2,25.3,23.2z"></path>
							</svg>







  </nav>


</div>

SVGs are inline elements – Martin Becker, ” because they are intended to be laid out amongst lines of text. Thankfully though, Flexbox makes it all easier, and we can now instead focus our designing energy towards higher level problems. The following is a very simple guide on centering elements using Flexbox. Horizontal Centering. Let’s start with a div that contains two paragraphs that we want to center horizontally on the same axis.

Your main problem occurs because of your viewbox settings on your SVGs. You should always specify the viewport (width and height) of your SVG when using viewbox. These settings really need to be played around with to get the right effect you're looking for. I removed your 3% width and padding settings on your second menu items because they were interfering with your viewbox as well.

For your container flexbox, I changed the display to flex instead of inline-flex, and then set your seconds menu nav to margin-left of auto - This keeps it on the right of the screen.

Run the snippet and expand it to see the second menu line up the way you want. Because your icons are of a fixed width, setting the container to flex-wrap: nowrap will keep your items from wrapping, but your main icon will shrink on smaller screens.

.container {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
}

.logo {
  width: auto;
  fill: orange;
  height: 57px;
}

.menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
}

.menu li {
  padding: 20px 30px;
  list-style: none;
}

.secondmenu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: auto;
}

.secondmenu svg {
  margin-top: 15px;
}
<div class="container">
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="2 -10 100 100">
 <path d="M11.9 49.6c-2.1 0-4.2-.7-5.8-2.2A8.2 8.2 0 0 1 3 41.6c0-.2 0-.4-.1-.6V24.7s4.1 0 4.1 3.7v4.7l.6-.3c.1 0 .1-.1.1-.1.1 0 .2-.1.2-.1a8.2 8.2 0 0 1 4.2-1.1h.4c1.9.1 3.5.6 5 1.7 2.1 1.6 3.3 3.6 3.7 6 .3 2.1 0 4.1-1 5.8-1.5 2.5-3.5 4-6.2 4.5-.8 0-1.5.1-2.1.1zm.2-14.3c-.3 0-.6 0-.9.1-2.6.3-4.2 2.4-4.2 5v.4c0 1.5.6 2.7 1.7 3.6.9.8 2.2 1.3 3.4 1.3.9 0 1.9-.3 2.7-.7 1.9-1.1 2.7-2.9 2.4-5.2-.3-2.2-2.1-4.5-5.1-4.5zM69.1 49.6c-2.4 0-4.7-.9-6.5-2.7a8.78 8.78 0 0 1-2.7-6c-.1-2.5.7-4.9 2.5-6.7 1.8-1.8 4.1-2.9 6.7-2.9 5 0 9.2 4.1 9.2 9.1 0 2.4-.9 4.6-2.6 6.4a9.13 9.13 0 0 1-6.1 2.8h-.5zm.1-14.3c-.3 0-.6 0-1 .1a5.1 5.1 0 0 0-4.3 5.2v.4c.1 2.8 2.3 4.9 5.1 4.9.9 0 1.9-.3 2.7-.7 1.9-1.1 2.6-2.9 2.3-5.2-.1-2.5-2-4.7-4.8-4.7zM40.2 24.7v24.6h4.3V28.4c-.1-3.6-4.3-3.7-4.3-3.7zM46.4 24.7v24.6h4.3V28.4c0-3.9-4.3-3.7-4.3-3.7z"></path>
 <path d="M52.6 49.3v-2.7-6.4c0-1.4.1-2.9.7-4.4.9-2.1 2.5-3.3 4.7-4 1.8-.5 3.4-.4 3.4-.4v3.9s-1 0-2 .3c-1.4.4-2.3 1.3-2.5 2.8-.1.6-.2 1.4-.2 2.2v8.7h-4.1zM79.9 51.7c1.8 0 2.3.9 2.7 1.3.6.5 1.4.8 2.1.8 2.3 0 4.1-2.1 4.1-4.1v-.9c-1 .6-2.1.8-3.2.8-4.1 0-7.3-3.4-7.3-7.6V31.6h4.1v10.2c0 1.9 1.5 3.6 3.2 3.6 1.9 0 3.2-1.6 3.2-3.6v-6.5c0-3.7 4.1-3.7 4.1-3.7v18c0 4.2-3.1 8.1-8.2 8.1-3.1 0-5.9-1.8-7.1-4.7-.4-.8-.5-1.4-.5-1.4s1.3.1 2.8.1zM30.3 45.9c-1.7 0-3.1-.8-4-2l13-4.6c-.6-3-1.8-4.9-3.6-6.2a9.3 9.3 0 0 0-7-1.5c-.6.1-1 .2-1.6.4a8.96 8.96 0 0 0-5.8 9.3 9 9 0 0 0 3.2 6.2c1.8 1.5 4 2.2 6.3 2.2 1 0 1.9-.2 2.9-.6 3.7-1.3 5.4-4.1 5.8-6.7h-2.4c-1.5 0-2.1 1-2.5 1.4a5.94 5.94 0 0 1-4.3 2.1zm-1.7-10.3c.1 0 .1 0 .2-.1H29.1c.4-.1.8-.2 1.3-.2.9 0 1.8.3 2.6.7.4.2.7.5 1 .8V37.1l.4.4-9.2 3.2v-.5c.1-2.2 1.4-3.9 3.4-4.6zM75.6 5.5c-.7 0-1.3.6-1.3 1.3 0 .7.7 1.4 1.5 1.2.3 1.1.9 2.1 1.8 2.8l.4.2.4-.3c.7-.6 1.4-1.7 1.7-2.8h.3c.7 0 1.3-.6 1.3-1.3s-.7-1.2-1.4-1.2c-.8 0-1.3.6-1.3 1.3 0 .9-.5 2.1-1.1 2.9-.6-.7-1-1.8-1.1-2.9.1-.6-.5-1.2-1.2-1.2zm16.5 11.6c-2.5-6.2-6.1-8-7.6-8.6.1-.4.1-.7.1-1.2 0-3.6-3-6.5-6.6-6.5-3.5 0-6.3 2.8-6.8 6.4-.7 8.7 5 13.5 7.8 15.7 1.6 1.2 2.4 2.1 1.5 3.6-.6.8-1.2 2-1.8 2.2-1.6.3-2.1 1.3-2.1 1.3H78c1.8 0 2.3-.1 4.1-3 1.7-2.9-1-4.5-2.1-5.4-2.8-2.1-8-6.4-7.3-14.2v-.1c.3-3 2.5-5.2 5.4-5.2a5.16 5.16 0 0 1 3.7 8.8c-.9 1-2.2 1.5-3.6 1.5-.5 0-.9-.1-1.3-.2-1.4-.4-2 .6-2 .6l-.1.1.1.1c.9.6 2.2.9 3.3.9 1.8 0 3.4-.6 4.6-1.9.6-.6 1.1-1.3 1.4-2 1.2.5 4.4 2.1 6.7 7.7.6 1.4 1.1 2.8 1.6 4-1.8 0-8.1-.2-11.2-5.1-.8-1.3-2.1-1-2.1-1 3.2 7.7 12.3 7.5 14 7.6.8 2 1.5 3.6 1.8 4.5-.7 0-2.1-.3-3.7-1.7a7.11 7.11 0 0 0-5.1-1.9l-4 6.3s1.9 0 2.7-1.2l2.2-3.5c1.1.1 2.2.6 3.3 1.5 2.1 1.7 3.4 1.9 4.7 1.9 1.2.1 1.9-.3 1.9-.3s-2.4-5.6-4.9-11.7z"></path>
 </svg>
  <div class="menu">

    <li>
      <a>
        <span>SHOP</span>
      </a>

    </li>
    <li>
      <a>
        <span>BUNDLES</span>
      </a>
    </li>
    <li>
      <a>
        <span>EXPLORE</span>
      </a>
    </li>


  </div>


  <nav class="secondmenu">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M15.5,26.8c-0.4,0-0.8-0.2-1.1-0.6C13.1,24.1,6.7,14,6.7,9.5c-0.1-5,3.8-9.1,8.8-9.3c1.1,0,2.2,0.2,3.2,0.7
								L19.1,1c0.6,0.3,1.1,0.6,1.6,1l0.3,0.3c0.3,0.2,0.5,0.5,0.8,0.8c0.4,0.4,0.7,0.9,1,1.4L23,4.7c0.1,0.1,0.1,0.3,0.2,0.4
								s0.1,0.3,0.2,0.4l0.2,0.4l0.2,0.4c0.1,0.3,0.2,0.6,0.2,0.9s0.1,0.3,0.1,0.4c0.1,0.5,0.2,1.1,0.2,1.6l0,0v0.3c0,1.2-0.3,2.4-0.7,3.5
								c-0.2,0.5-0.4,1.1-0.6,1.6c-0.1,0.3-0.3,0.7-0.5,1l-0.3,0.7L21.8,17l-0.3,0.7c-0.4,0.7-0.7,1.4-1.1,2c-0.2,0.4-0.5,0.9-0.7,1.3
								L19,22.2l-0.3,0.6c-1.2,2-2,3.3-2.1,3.4C16.4,26.6,16,26.8,15.5,26.8L15.5,26.8z M15.5,2.8c-3.6,0.1-6.3,3.1-6.2,6.7
								c0,2.7,3.6,9.4,6.2,13.6l1-1.6l0.3-0.5c0.2-0.4,0.5-0.8,0.7-1.2s0.5-0.8,0.7-1.2c0.4-0.7,0.7-1.3,1-2c0.1-0.2,0.2-0.4,0.3-0.7
								l0.3-0.7l0.3-0.6c0.1-0.3,0.3-0.6,0.4-1c0.2-0.5,0.4-1,0.6-1.5c0.3-0.9,0.6-1.8,0.6-2.7V9.3c0-0.4,0-0.8-0.1-1.2
								c0-0.1,0-0.2-0.1-0.3s-0.1-0.4-0.2-0.6l-0.1-0.3c0-0.1-0.1-0.2-0.1-0.3S21,6.4,21,6.3S20.9,6.1,20.8,6l-0.1-0.1
								c-0.2-0.4-0.5-0.7-0.7-1c-0.2-0.2-0.4-0.4-0.5-0.6l-0.2-0.2c-0.4-0.3-0.8-0.5-1.2-0.8l-0.3-0.1C17,2.9,16.3,2.8,15.5,2.8z
								 M15.5,13.4c-2.6-0.1-4.6-2.2-4.6-4.8c0,0,0,0,0,0c-0.1-2.6,2-4.7,4.5-4.8l0,0c2.6,0,4.7,2.2,4.7,4.8c0,0,0,0,0,0
								C20.1,11.1,18.1,13.3,15.5,13.4L15.5,13.4z M15.5,6.4c-1.2,0.1-2,1.1-2,2.2c-0.1,1.2,0.8,2.2,2,2.2c1.2-0.1,2.1-1.1,2-2.2
								C17.6,7.4,16.7,6.4,15.5,6.4C15.5,6.3,15.5,6.3,15.5,6.4L15.5,6.4z"></path>
							</svg>







    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M15.3,15.7c-0.3,0-0.5-0.1-0.8-0.2L2,6.5C1.4,6.1,1.3,5.3,1.7,4.7S2.9,4,3.5,4.4l11.9,8.5l12.1-8.5
								C28,4,28.8,4.1,29.2,4.7c0.4,0.6,0.3,1.4-0.3,1.8l0,0l-12.8,9C15.9,15.6,15.6,15.7,15.3,15.7z"></path>
							<path  d="M27.3,6.3c0.1,0,0.1,0.1,0.1,0.1V21c0,0.1-0.1,0.1-0.1,0.1H3.7c-0.1,0-0.1-0.1-0.1-0.1V6.5
								c0-0.1,0.1-0.1,0.1-0.1H27.3 M27.3,3.8H3.7C2.2,3.8,1,5,1,6.5V21c0,1.5,1.2,2.7,2.7,2.7h23.6c1.5,0,2.7-1.2,2.7-2.7V6.5
								C30,5,28.8,3.8,27.3,3.8L27.3,3.8z"></path>
							</svg>






    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
							<path  d="M8.1,16.6c3,3,7.9,3,11,0s3-7.9,0-11s-7.9-3-11,0c-1.4,1.5-2.3,3.4-2.3,5.5C5.8,13.2,6.6,15.2,8.1,16.6z
							 M27.8,23.5c0.5,0.5,0.5,1.3,0,1.8c0,0,0,0,0,0c-0.5,0.5-1.3,0.5-1.8,0c0,0,0,0,0,0l-6-6c-4.5,3.5-11,2.7-14.6-1.8
							c-1.4-1.8-2.2-4.1-2.2-6.5c0-5.7,4.6-10.4,10.4-10.4C19.3,0.8,24,5.4,24,11.1c0,2.3-0.8,4.5-2.2,6.4L27.8,23.5z"></path>
						</svg>











    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" xml="preserve">
								<path  d="M24,18.8H10.3c-0.6,0-1.1-0.4-1.3-0.9L5.5,6.1L5.1,4.8c-0.3-1-1.1-1.6-2.1-1.7H1.3C0.6,3.2,0,2.7-0.1,2
									s0.5-1.3,1.2-1.4c0.1,0,0.2,0,0.2,0h1.6c2.1,0,3.9,1.4,4.6,3.4L8,5.2l0.3,1h21c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.3,1L30,14
									C29.6,16.9,27,19,24,18.8z M11.2,16.3H24c3.1,0,3.4-2.4,3.5-2.5l0.4-4.9H9L11.2,16.3z"></path>
								<path  d="M13.6,27c-1.8,0-3.2-1.4-3.2-3.2c0-1.8,1.4-3.2,3.2-3.2s3.2,1.4,3.2,3.2c0,0,0,0,0,0C16.7,25.6,15.3,27,13.6,27
									C13.6,27,13.6,27,13.6,27z M13.6,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6c0,0,0,0,0,0
									C14.2,23.5,13.9,23.2,13.6,23.2z"></path>
								<path  d="M25.3,27c-1.8,0-3.2-1.4-3.2-3.1c0-1.8,1.4-3.2,3.1-3.2c1.8,0,3.2,1.4,3.2,3.1c0,0,0,0,0,0
									C28.4,25.6,27,27,25.3,27z M25.3,23.2c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0,0.3,0.3,0.6,0.6,0.6s0.6-0.3,0.6-0.6
									C25.9,23.5,25.6,23.2,25.3,23.2z"></path>
							</svg>







  </nav>

</div>

Adding vector graphics to the Web, Inline SVG can be "styled" in the sense that it already has fills and strokes and .​my-rect { fill: blue; /* remember it's fill not background, teamsters */ } “more power”, you could say, than style attributes on the SVG elements themselves. Other Nav. Contact About Guest Writing Jobs Advertise License Subscribe All Authors. align-content: space-evenly (not defined in the Flexbox specification) In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between , which means that the available space is shared out between the flex lines, which are placed flush with the

img src SVG changing the styles with CSS, Always making sure image / SVG elements in a flex container have an explicit I have inline svg with no width / height set as a flex item and am flex item, and isn't a flex item itself, to demonstrate another issue related to the  If your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order. If you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source.

<svg>, Any value other than none or inherit indicates that the given element The geometry of a graphics element with display set to none is not <display-legacy​> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid. The reason for this is that SVG group elements (g) have an origin but do not have a width or height. In order for a child element to occupy the rectangle defined by the layout mechanism, they need some way to obtain the computed bounds. The following puts it all together as a function that can be called on a D3 selection

20: Styling Inline SVG, Flexbox may not be the solution to all of our CSS problems, but at least when it comes to Centering of elements on a page, especially vertical centering, has been <div class="box flex"> <p> <img src="/images/pirate.svg" width="75"> arrr​! Vertically Align With Flexbox. Centering a text or element vertically has always been quite a pain for many front-end developers. Introduced in the CSS3 specification, the display: flex property/value provides an easy way to vertically align any element.

Comments
  • hello what if i make font larger how to align them again inline ? because for example if i add fontSize to ul menu slightly goes down
  • you can adjust the padding on .svg-container svg... the height controls the size of the icon and the padding 1.8rem (top and bottom) 1rem (left and right) if you need them to be close together so you can better align them just comment out flex-grow: 1; on the ul untill you are satisfied let me know if you need anything else. Thank you for the answer mark
  • Also if you would like to get rid of the padding all together look into align items and justify content for flexbox. Then you would need to supply your ul and svg-container with some sort of width and height (min-width / min-height or just width / height) then align items center and justify content space around / space between
  • they are not inlined logo and menu are now smaller in size ??
  • you can fix this adding a fixed width to .logo and .secondmenu svg, I've update my answer